# Añadir una segunda app

Amplía tu primer workspace con Vue, comprueba las dos microapps y distingue lo que WU coordina del estado local de cada app.

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

## De una app a dos

Continúa en el proyecto `mi-plataforma` de [Tu primera microapp](/es/docs/guides/quickstart/). Ya tienes React funcionando dentro del shell Astro. Ahora añadirás una app Vue llamada `inspector` y comprobarás que las dos funcionan desde la misma página.

Conservaremos los contadores de las plantillas para que puedas reconocer el resultado antes de modificar componentes.

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

## 1. Añadir Vue al workspace

Detén el servidor de desarrollo con **Ctrl+C**. Desde la raíz `mi-plataforma/`, donde está `wu.config.json`, ejecuta:

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

El orden de `add` es **framework, nombre**. El primer comando crea `mf-inspector/` y registra la nueva app en la configuración del workspace. `--no-install` deja la instalación para el segundo comando, que también instala las dependencias de Vue.

Espera a que `wu install` termine correctamente antes de continuar.

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

## 2. Arrancar y comprobar ambas apps

Inicia otra vez el servidor:

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

Abre o recarga [http://127.0.0.1:3000](http://127.0.0.1:3000) cuando la terminal anuncie que está escuchando.

1. En **Overview**, comprueba que aparecen `mi-plataforma` e `inspector`.
2. Abre **mi-plataforma**. Debes ver **React** y su contador bajo **Interactions**. Comprueba **+** y **−**: **0 → 1 → 0**.
3. Abre **inspector**. Debes ver **Vue**, el nombre `inspector` y su contador. Comprueba también **+** y **−**.
4. Vuelve a **Overview**.

**El mismo shell ya puede mostrar apps de dos frameworks.** No has tenido que convertir un componente React a Vue ni cambiar la navegación a mano.

Si `inspector` no aparece, comprueba que ejecutaste `add` desde la raíz correcta y que `wu.config.json` incluye la nueva app. Si aparece en la navegación pero queda vacía, revisa el primer error de consola o de carga JavaScript del navegador. [Desarrollo y recarga](/es/docs/cli/development/) explica cómo seguir el diagnóstico.

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

## 3. Localizar el código de cada app

| Lo que quieres cambiar | Archivo |
| --- | --- |
| El contenido y el contador React | `mf-mi-plataforma/src/App.tsx` |
| El contenido y el contador Vue | `mf-inspector/src/App.vue` |
| La página anfitriona y su navegación | `shell/src/pages/index.astro` |

Edita los componentes en la carpeta de su app y conserva el servidor de desarrollo abierto para comprobar los cambios. Las dependencias propias se declaran en el `package.json` de esa app; después ejecuta `wu install` desde la raíz para actualizar la instalación del workspace.

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

## Qué comparten y qué conserva cada app

Las dos apps utilizan el mismo shell y el runtime WU que las carga y monta. Cada una conserva sus componentes, su framework y el estado de su contador. **Añadir Vue no conecta automáticamente los dos contadores.**

Cuando necesites que las apps colaboren, elige la comunicación según la tarea:

- **Eventos:** una app anuncia algo que ha ocurrido, como «se añadió un producto».
- **Store:** varias apps consultan y actualizan un dato compartido, como la cantidad de productos del carrito.
- **Contratos y RPC:** una app ofrece una operación y otra solicita su resultado.

Para conectar estos mismos contadores, sigue [Un contador entre React y Vue](/es/docs/guides/shared-counter/). Incluye los componentes completos, los permisos de ambas apps y una página Astro que permite verlas juntas. Después, [Una suma entre aplicaciones](/es/docs/guides/rpc-between-apps/) añade un cliente y un proveedor al mismo workspace.

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

## Qué configura cada archivo

No necesitas editar estos archivos para completar el recorrido. Esta distinción te servirá cuando personalices el proyecto:

| Archivo o llamada | Para qué sirve |
| --- | --- |
| `wu.config.json` | Le indica a la CLI dónde están el shell y las apps, qué frameworks usan y qué comandos o puertos corresponden a cada uno. |
| `wu.json` | Es el manifiesto de una microapp: describe su entrada y puede declarar contratos o permisos. Esta plantilla no crea un `wu.json` fuente; el servidor de desarrollo puede generarlo al solicitarlo y el build escribe el de producción. |
| `wu.init({ ... })` | Configura el runtime en el navegador: qué apps puede cargar el shell y desde qué URLs. El shell generado ya realiza esta llamada. |

Consulta [Configuración y descubrimiento](/es/docs/cli/configuration/) para modificar el workspace y [Configuración y manifests](/es/docs/framework/configuration/) para configurar apps en el runtime.

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

## Siguiente paso

Continúa con [Preparar producción](/es/docs/guides/production/) para construir las apps, servir la salida y comprobar lo que publicarás. Si quieres conectarlas primero, puedes completar el [contador compartido](/es/docs/guides/shared-counter/) y luego construir el proyecto con los mismos comandos.