Wippy Micro Frontends

Classification: conceptual decision guide. This page compares the two artifact types and routes readers to the build and API references; it is not a standalone project tutorial.

Wippy frontend code runs inside the Web Host's isolation boundary. You can build two artifact types: micro frontend apps and web components. Both are independent Vite projects, communicate with the platform through @wippy-fe/proxy, and are declared to the backend in a _index.yaml registry entry. They differ in how they are rendered and where they are used.

Micro frontend app vs web component

Micro Frontend App (view.page) Web component (view.component)
Rendered as Page surface: srcdoc iframe or Web Fragment Custom element in Shadow DOM, inside a page
Has its own URL / nav entry Yes — claims a backend mountRoute No — embedded inside another page or chat artifact
Internal routing Yes — vue-router with memory history No — single component, no router
Controls its allocated surface Yes — the surface may be one panel, not the browser viewport 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 Engine-dependent: iframe boundary; a Web Fragment shares the host document Shadow DOM selector boundary

Quick rule: use a micro frontend app when it needs vue-router, a dedicated URL, or ownership of a routed page surface. Use a web component when it must be embeddable, reusable, and self-contained.

Quickstart provides minimal end-to-end examples for a Vue micro frontend app and a Vue web component, with links to the public app repository.

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:

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 22.12 or newer and Vite 7 for this documentation baseline. The Host source package declares Node 22+ and uses Vite 7; Vite 7 itself requires Node 20.19+ or 22.12+. @wippy-fe/vite-plugin 0.0.56 also accepts Vite 5 and 6, but consumers choosing those versions must follow that Vite release's Node requirements