77 lines
2.4 KiB
JavaScript
77 lines
2.4 KiB
JavaScript
|
// https://vike.dev/onRenderHtml
|
||
|
|
import { renderToString as renderToString_ } from '@vue/server-renderer';
|
||
|
|
import { escapeInject, dangerouslySkipEscape } from 'vike/server';
|
||
|
|
|
||
|
|
import { createApp } from './app.js';
|
||
|
|
import getTitle from '../src/get-title.js';
|
||
|
|
|
||
|
|
async function renderToString(app) {
|
||
|
|
let err;
|
||
|
|
// Workaround: renderToString_() swallows errors in production, see https://github.com/vuejs/core/issues/7876
|
||
|
|
|
||
|
|
app.config.errorHandler = (err_) => { // eslint-disable-line no-param-reassign
|
||
|
|
err = err_;
|
||
|
|
};
|
||
|
|
|
||
|
|
const appHtml = await renderToString_(app);
|
||
|
|
|
||
|
|
if (err) {
|
||
|
|
throw err;
|
||
|
|
}
|
||
|
|
|
||
|
|
return appHtml;
|
||
|
|
}
|
||
|
|
|
||
|
|
async function onRenderHtml(pageContext) {
|
||
|
|
const { Page, pageProps } = pageContext;
|
||
|
|
// This onRenderHtml() hook only supports SSR, see https://vike.dev/render-modes for how to modify
|
||
|
|
// onRenderHtml() to support SPA
|
||
|
|
|
||
|
|
if (!Page) {
|
||
|
|
throw new Error('My render() hook expects pageContext.Page to be defined');
|
||
|
|
}
|
||
|
|
|
||
|
|
const app = createApp(Page, pageProps, pageContext);
|
||
|
|
|
||
|
|
const appHtml = await renderToString(app);
|
||
|
|
|
||
|
|
// See https://vike.dev/head
|
||
|
|
const { documentProps } = pageContext.exports;
|
||
|
|
const title = getTitle(documentProps?.title || pageContext.title);
|
||
|
|
const desc = (documentProps && documentProps.description) || 'traxxx';
|
||
|
|
|
||
|
|
const documentHtml = escapeInject`<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
|
||
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-touch-icon.png">
|
||
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32x32.png">
|
||
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16x16.png">
|
||
|
|
<link rel="manifest" href="/img/favicon/site.webmanifest">
|
||
|
|
<link rel="mask-icon" href="/img/favicon/safari-pinned-tab.svg" color="#5bbad5">
|
||
|
|
<link rel="shortcut icon" href="/img/favicon/favicon.ico">
|
||
|
|
<meta name="msapplication-TileColor" content="#b91d47">
|
||
|
|
<meta name="msapplication-config" content="/img/favicon/browserconfig.xml">
|
||
|
|
<meta name="theme-color" content="#f65596">
|
||
|
|
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
|
<meta name="description" content="${desc}" />
|
||
|
|
|
||
|
|
<title>${title}</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="app">${dangerouslySkipEscape(appHtml)}</div>
|
||
|
|
</body>
|
||
|
|
</html>`;
|
||
|
|
|
||
|
|
return {
|
||
|
|
documentHtml,
|
||
|
|
pageContext: {
|
||
|
|
// We can add some `pageContext` here, which is useful if we want to do page redirection https://vike.dev/page-redirection
|
||
|
|
},
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
export { onRenderHtml };
|