vite-ssr-vue/server.d.ts

Vite utility for vue3 server side rendering

import { App, Component } from 'vue';
import { HeadClient } from '@vueuse/head';
import { Router } from 'vue-router';
import { Store } from 'vuex';
import { SSRContext } from '@vue/server-renderer';
import { Pinia } from 'pinia';

type SsrHandler = (
    App: Component,
    options?: CreatorOptions
) => SsrRenderer
interface CreatorOptions {
    created?:Hook, // Fire when app instance created
    mounted?:Hook, // Fire after all internal operations, as router isReady
    rendered?:Hook, // After ssr rendered or after replace state in client
    serializer?: ( // allows you to override the default serialization
        state: any
    ) => any | Promise<any>,

    // shouldPreload aka [shouldPreload](https://ssr.vuejs.org/api/#shouldpreload)
    shouldPreload?:(file: string, type: string) => boolean,

    // shouldPrefetch aka [shouldPrefetch](https://ssr.vuejs.org/api/#shouldprefetch)
    shouldPrefetch?:(file: string, type: string) => boolean,
    mount?: { // vue mount options (for client side)
        rootContainer?:any,
        isHydrate?: boolean,
        isSVG?: boolean
    },
    rootProps?:Record<string, any>|null // vue root props
}

// Wrapper for ssr render
type SsrRenderer = (
    url: string | URL,
    options?: {
        manifest?: Record<string, string[]>,
        [key: string]: any
    }
) => Promise<{ html: string; dependencies: string[] }>

// Created hook params
type Hook = (params: {
    app: App
    url: URL | Location
    isClient: boolean
    initialState: Record<string, any>,
    context?: Context,
    [key: string]: any
}) => HookResponse | Promise<HookResponse>

/**
 * Created hook response
 * If the parameter is returned, the default action is enabled
 * examle: if you return store,
 * auto add initialState
 * you can override this behavior(if you don’t return the store)
 */
type HookResponse = void | {
    head?: HeadClient,
    router?:Router,
    store?:Store<any>,
    pinia?: Pinia,
    inserts?: {
        htmlAttrs?:string,
        headTags?:string,
        bodyAttrs?:string,
        body?:string,
        dependencies?:Array<string>
    },
    context?:SSRContext
}

/**
 * Context that used for render server entry point for development
 * It needs a production implementation for your environment.
 * The context will go to the created hook parameters of the plugin
 */
interface Context {

    /**
     * hostname (example.com)
     * as express req.hostname
     */
    hostname: string,

    /**
     * protocol (http)
     * as express req.protocol
     */
    protocol: string,

    /**
     * string current url
     * /search?q=something
     */
    url: string,

    /**
     * this property is an object that contains cookies sent by the request
     */
    cookies: Record<string, any>,

    /**
     * remote address (127.0.0.1)
     */
    ip: string,

    /**
     * special property for usin memcached
     */
    memcache: number|null,

    /**
     * response status code
     * default 200
     */
    statusCode: number,

    /**
     * Request headers
     */
    headers: Record<string, any>,

    /**
     * Response headers
     */
    responseHeaders: Record<string, any>,
}

declare const ClientOnly: Component;

/**
 * Create client instance of vue app
 */
declare const createViteSsrVue: SsrHandler;

export { ClientOnly, type Context, type CreatorOptions, createViteSsrVue as default };