Page Recipe

A page is a Vite-built application rendered through either the legacy about:srcdoc iframe engine or the Web Fragment engine. Its route and host context come from Wippy AppConfig and packages, not from browser location.

This is an integration recipe for an existing Vue/Vite project. It identifies the Wippy-specific entry code and deployment contract; it does not provide a standalone project scaffold or backend setup.

Required setup

  1. Register a view.page and its serving filesystem/router entries.
  2. Enable required CSS delivery. When the iframe engine may be selected, keep the iframe CSS block enabled for default scrollbar consistency.
  3. Use @wippy-fe/router for Vue routing.
  4. Install PrimeVue and the Wippy PrimeVue plugin when the page renders any PrimeVue-like control.
  5. Use the shared Wippy Tailwind preset when the page authors Tailwind utilities.
  6. Generate externals from the pinned Web Host import-map snapshot.
  7. Mount the application at #app; content-sized Web Fragments require that exact root id.
  8. Build into the deployment-selected output directory.
import { createApp } from 'vue'
import PrimeVue from '@wippy-fe/theme/primevue-plugin'
import { createAppRouter } from '@wippy-fe/router'
import { config } from '@wippy-fe/proxy'
import App from './App.vue'
import { routes } from './routes'

const app = createApp(App)
app.use(PrimeVue)
app.use(createAppRouter(routes, {
  initialPath: config.context?.route ?? '/',
}))
app.mount('#app')

Verify the exact exported signatures against the selected package version. Do not create a local router synchronization layer.

Theme injection

The page consumes the facade theme delivered into its selected page realm. Use public PrimeVue components, public theme variables, documented runtime-backed Tailwind utilities, and explicitly invariant compile-time utilities.

Do not use a host query parameter as an application fixture. AppConfig owns host context.

Build

Invoke the Wippy module repository's Make target. Its recipe supplies the deployment output with:

npm run build -- --outDir <target> --emptyOutDir

vite.config.ts keeps relative asset behavior and does not hardcode deployment outDir.

Do not invoke the underlying package-manager or Vite build command directly. On Windows, invoke make.bat; it delegates to the target's make.ps1 implementation.

See Build and Dependency Contract, Platform Topology, and Configuration and Casing.