@samveys/vue

# createVueEngine Function

The Vue engine: `render(name, props)` renders the page component `name` on the server with `createSSRApp` + `renderToString` and wraps it in an HTML shell with the serialized state and the client entry. In the browser, `createSSRApp(component, props).mount('#app')` hydrates the markup.

function createVueEngine(options: VueEngineOptions, helpers?: ViewHelpers): ViewEngine;

Exported from packages/vue/src/engine.ts

# parseState Function

Reads what {@link serializeState} wrote: pass `document.getElementById('__SVS_STATE__').textContent`.

function parseState<T = unknown>(text: string): T;

Exported from packages/vue/src/state.ts

# serializeState Function

JSON for a `<script type="application/json">` body. `<`, `>`, `&` and the two line separators are written as `\uXXXX` escapes, so no value (`</script>`, `<!--`) can end the script element, and `JSON.parse` gives back exactly the value that went in.

function serializeState(state: unknown): string;

Exported from packages/vue/src/state.ts

# vue Function

The `@samveys/vue` plugin: registers the `vue` engine with `@samveys/view`. Pages render on the server with `vue/server-renderer`; `.vue` files are compiled by Vite in the app, which passes the compiled components in.

function vue(options: VueOptions): import("@samveys/core").Plugin<import("./contracts.ts").VueEngineOptions>;

Exported from packages/vue/src/plugin.ts

# STATE_ELEMENT_ID Value

The id of the `<script type="application/json">` that carries the page state to the browser.

const STATE_ELEMENT_ID = "__SVS_STATE__";

Exported from packages/vue/src/state.ts

# VueEngineOptions Interface

Types of `@samveys/vue`.

interface VueEngineOptions {
    /**
     * Page components by name. They are compiled `.vue` files (build the SFCs with Vite) or plain objects
     * with a `render` function written with `h()`.
     */
    readonly components: Readonly<Record<string, Component>>;
    /** Vite entry of the browser bundle, e.g. `resources/app.ts`; its tags are added to the page. */
    readonly entry?: string;
    /** Id of the element that holds the rendered app. Default `app`. */
    readonly id?: string;
  …

interface VueEngineOptions {
    /**
     * Page components by name. They are compiled `.vue` files (build the SFCs with Vite) or plain objects
     * with a `render` function written with `h()`.
     */
    readonly components: Readonly<Record<string, Component>>;
    /** Vite entry of the browser bundle, e.g. `resources/app.ts`; its tags are added to the page. */
    readonly entry?: string;
    /** Id of the element that holds the rendered app. Default `app`. */
    readonly id?: string;
    /** Page `<title>`. */
    readonly title?: string;
    /** Extra markup for `<head>`; trusted, not escaped. */
    readonly head?: string;
}

Exported from packages/vue/src/contracts.ts

# VuePageState Interface

What the browser reads from the state element: the component to hydrate and its props.

interface VuePageState {
    readonly component: string;
    readonly props: Readonly<Record<string, unknown>>;
}

Exported from packages/vue/src/contracts.ts

# VueOptions Type

Options of the plugin: the engine options.

type VueOptions = VueEngineOptions;

Exported from packages/vue/src/contracts.ts