Skip to main content
mount() renders your app component into the #app root element. It handles both fresh rendering and hydration of server-rendered HTML.

​
Signature

import { mount } from 'vertz/ui';

mount(App, options?);

​
Parameters

ParameterTypeDescription
app() => Element | DocumentFragmentComponent function that returns the app’s root element
optionsMountOptionsOptional configuration

​
MountOptions

OptionTypeDescription
themeThemeDesign tokens from defineTheme() — compiled to CSS and injected
stylesstring[]Global CSS strings to inject into <head>
onMount(root: HTMLElement) => voidCallback fired after mount completes

​
Returns

MountHandle — an object with a dispose() method to unmount the app.

​
Usage

​
Basic

import { mount } from 'vertz/ui';
import { App } from './app';

mount(App);

​
With theme and styles

import { mount } from 'vertz/ui';
import { App, styles } from './app';
import { appTheme } from './styles/theme';

mount(App, {
  theme: appTheme,
  styles,
});

​
Root element

mount() always targets #app — there is no selector parameter. The framework controls the HTML in every context (SSR, dev server, scaffolded templates), so the root element is always <div id="app">. If #app is not found in the document, mount() throws an error.

​
Hydration

When server-rendered HTML exists inside #app, mount() performs tolerant hydration — it walks the existing DOM and adopts server-rendered nodes instead of replacing them. If hydration fails (mismatched structure), it falls back to full client-side rendering automatically.