Wippy Micro Frontends

Wippy Micro Frontends

Wippy frontend code runs inside the Web Host’s isolation boundary. There are two kinds of artifact you can build: micro frontend apps and web components. Both are independent Vite projects, both communicate with the platform through @wippy-fe/proxy, and both are declared to the backend via a _index.yaml registry entry. The difference is how they are rendered and what they are suitable for.

Micro Frontend App vs web component

	Micro Frontend App (view.page)	Web component (view.component)
Rendered as	Full iframe, isolated browsing context	Custom element in Shadow DOM, inside a page
Has its own URL / nav entry	Yes — claims a mountRoute	No — embedded inside another page or chat artifact
Internal routing	Yes — vue-router with memory history	No — single component, no router
Controls the viewport	Yes	No — sized by the surrounding layout
Reusable across pages	No — one URL, one place	Yes — any page can embed the tag
Receives typed props	No — reads AppConfig	Yes — schema-declared HTML attributes
Emits typed events	No — communicates via proxy API	Yes — schema-declared CustomEvents
CSS isolation	iframe boundary	Shadow DOM (full encapsulation)

Quick rule: if it needs vue-router, a dedicated URL, or owns the full viewport — it is a micro frontend app. If it is embeddable, reusable, and self-contained — it is a web component.

When in doubt, start with a web component. It is easier to promote to a micro frontend app later than the reverse.

What to read next

In a hurry? Quickstart has minimal end-to-end examples for both a Vue micro frontend app and a Vue web component, with links to the public app repo.

Build a micro frontend app:

1. Micro Frontend App — scaffold, package.json wippy block, Vite config, bootstrap sequence, router sync
2. Build System — @wippy-fe/vite-plugin, wippy-meta.json, externals
3. Proxy API — @wippy-fe/proxy reference for communicating with the host
4. Theming → Theming: Micro Frontend Apps — CSS variable catalog, then how to receive it via proxy injections

Build a web component:

1. Web Component — scaffold, WippyVueElement, props, events, shadow DOM CSS
2. Build System — same Vite toolchain, different plugin and output format
3. Proxy API — same API, imported directly from @wippy-fe/proxy
4. Theming → Theming: Web Components — CSS variable catalog, then how to receive it across the shadow DOM boundary

Both:

• Host-less Mode — develop and test without running the full Web Host
• Compliance Checklist — MUST/SHOULD rules before shipping
• Debugging — symptom-first guide for the most common failure scenarios

Prerequisites

• Wippy backend module with wippy/views declared as a dependency (see Views)
• wippy/facade for the Web Host entry point (see Facade Entry Point)
• Node.js 20+, pnpm or npm, Vite 6