LEARN4 MIN READ · MARKDOWN ↗

Adding a second app

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

From one app to two

Continue in the mi-plataforma project from Your first microapp. 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.

1. Add Vue to the workspace

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

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.

2. Start and check both apps

Start the server again:

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

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

In Overview, check that mi-plataforma and inspector appear.
Open mi-plataforma. You should see React and its counter under Interactions. Check + and −: 0 → 1 → 0.
Open inspector. You should see Vue, the name inspector, and its counter. Check + and − too.
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 explains how to continue diagnosing it.

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.

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. It includes complete components, both apps’ permissions, and an Astro page displaying them together. Then A sum between applications adds a client and provider to the same workspace.

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 to change the workspace, and Configuration and manifests to configure runtime apps.

Next step

Continue with Preparing production to build apps, serve output, and check what you will publish. To connect them first, complete the shared counter, then build the project with the same commands.