# Adding a second app

Extend your first workspace with Vue, check both microapps, and distinguish what WU coordinates from each app's local state.

<span id="de-una-app-a-dos"></span>

<span class="section-anchor" id="section-1"></span>

## From one app to two

Continue in the `mi-plataforma` project from [Your first microapp](/docs/guides/quickstart/). React is already running inside the Astro shell. Now you will add a Vue app named `inspector` and check that both work from the same page.

We will keep the template counters so you can recognize the result before changing components.

<span id="1-añadir-vue-al-workspace"></span>

<span class="section-anchor" id="section-2"></span>

## 1. Add Vue to the workspace

Stop the development server with **Ctrl+C**. From the `mi-plataforma/` root containing `wu.config.json`, run:

```sh
wu add vue inspector --no-install
wu install
```

The `add` order is **framework, name**. The first command creates `mf-inspector/` and registers the new app in workspace configuration. `--no-install` leaves installation to the second command, which also installs Vue dependencies.

Wait for `wu install` to finish successfully before continuing.

<span id="2-arrancar-y-comprobar-ambas-apps"></span>

<span class="section-anchor" id="section-3"></span>

## 2. Start and check both apps

Start the server again:

```sh
wu dev --native --port 3000 --no-open
```

Open or reload [http://127.0.0.1:3000](http://127.0.0.1:3000) when the terminal announces it is listening.

1. In **Overview**, check that `mi-plataforma` and `inspector` appear.
2. Open **mi-plataforma**. You should see **React** and its counter under **Interactions**. Check **+** and **−**: **0 → 1 → 0**.
3. Open **inspector**. You should see **Vue**, the name `inspector`, and its counter. Check **+** and **−** too.
4. Return to **Overview**.

**The same shell can now display apps from two frameworks.** You did not have to convert a React component to Vue or manually change navigation.

If `inspector` does not appear, check that you ran `add` from the correct root and `wu.config.json` includes the new app. If it appears in navigation but remains blank, inspect the browser's first console or JavaScript-loading error. [Development and reload](/docs/cli/development/) explains how to continue diagnosing it.

<span id="3-localizar-el-código-de-cada-app"></span>

<span class="section-anchor" id="section-4"></span>

## 3. Locate each app's code

| What you want to change | File |
| --- | --- |
| React content and counter | `mf-mi-plataforma/src/App.tsx` |
| Vue content and counter | `mf-inspector/src/App.vue` |
| The host page and its navigation | `shell/src/pages/index.astro` |

Edit components in their app folder and keep the development server open to check changes. Declare custom dependencies in that app's `package.json`; then run `wu install` from the root to update the workspace installation.

<span id="qué-comparten-y-qué-conserva-cada-app"></span>

<span class="section-anchor" id="section-5"></span>

## What they share and what each app keeps

Both apps use the same shell and the WU runtime that loads and mounts them. Each keeps its components, framework, and counter state. **Adding Vue does not automatically connect the two counters.**

When apps need to collaborate, choose communication according to the task:

- **Events:** an app announces something that happened, such as "a product was added."
- **Store:** multiple apps read and update shared data, such as the number of products in a cart.
- **Contracts and RPC:** one app offers an operation and another requests its result.

To connect these very counters, follow [A counter between React and Vue](/docs/guides/shared-counter/). It includes complete components, both apps' permissions, and an Astro page displaying them together. Then [A sum between applications](/docs/guides/rpc-between-apps/) adds a client and provider to the same workspace.

<span id="qué-configura-cada-archivo"></span>

<span class="section-anchor" id="section-6"></span>

## What each file configures

You do not need to edit these files to complete the walkthrough. This distinction will help when customizing the project:

| File or call | Purpose |
| --- | --- |
| `wu.config.json` | Tells the CLI where the shell and apps are, which frameworks they use, and their commands or ports. |
| `wu.json` | A microapp manifest: describes its entrypoint and may declare contracts or permissions. This template creates no source `wu.json`; the development server may generate it on request, and the build writes the production version. |
| `wu.init({ ... })` | Configures the browser runtime: which apps the shell can load and from which URLs. The generated shell already makes this call. |

See [Configuration and discovery](/docs/cli/configuration/) to change the workspace, and [Configuration and manifests](/docs/framework/configuration/) to configure runtime apps.

<span id="siguiente-paso"></span>

<span class="section-anchor" id="section-7"></span>

## Next step

Continue with [Preparing production](/docs/guides/production/) to build apps, serve output, and check what you will publish. To connect them first, complete the [shared counter](/docs/guides/shared-counter/), then build the project with the same commands.