Harlem Server-Side Rendering Plugin

The SSR plugin adds support for using Harlem in a Vue server-side rendered application.

Installation

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

``bash
yarn add @harlem/plugin-ssr


or


npm install @harlem/plugin-ssr
`

Usage

$3

Create an instance of the plugin and register it with Harlem on the server:
`typescript
import App from './app.vue';

import {
createVuePlugin
} from 'harlem';

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

createSSRApp(App)
.use(createVuePlugin({
plugins: [
createServerSSRPlugin()
]
}));
`

Generate the bridging script block and insert it into the server-rendered content:
`typescript
import {
renderToString
} from '@vue/server-renderer';

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

let output = await renderToString(app);
output += getBridgingScriptBlock();
`

$3

Create an instance of the plugin and register it with Harlem on the client:
`typescript
import App from './app.vue';

import {
createVuePlugin
} from 'harlem';

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

createApp(App)
.use(createVuePlugin({
plugins: [
createClientSSRPlugin()
]
}));
``

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 docs