Harlem

Server-Side Rendering

npm

This is the official plugin for using Harlem in a Vue SSR application.

Installation

Before installing the ssr plugin make sure you have installed @harlem/core.

yarn add @harlem/plugin-ssr

npm install @harlem/plugin-ssr

Usage

Server

Create an instance of the plugin and register it with Harlem on the server:

import App from './app.vue';

import harlem from '@harlem/core';

import {
    createServerSSRPlugin
} from '@harlem/plugin-ssr';

createSSRApp(App)
    .use(harlem, {
        plugins: [
            createServerSSRPlugin()
        ]
    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Generate the bridging script block and insert it into the server-rendered content:

import {
    renderToString
} from '@vue/server-renderer';

import {
    getBridgingScriptBlock
} from '@harlem/plugin-ssr';

let output = await renderToString(app);
output += getBridgingScriptBlock();
1
2
3
4
5
6
7
8
9
10

Client

Create an instance of the plugin and register it with Harlem on the client:

import App from './app.vue';

import harlem from '@harlem/core';

import {
    createClientSSRPlugin
} from '@harlem/plugin-ssr';

createApp(App)
    .use(harlem, {
        plugins: [
            createClientSSRPlugin()
        ]
    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Warning

Types that are not support by JSON serialisation will not be transferred from server to client. See the MDN documentation on JSON serialisation for more information: MDN docsopen in new window