update

__packages__/www/renderer/Link.vue

@@ -1,5 +1,5 @@
 <template>
-  <a :class="{ active: pageContext.urlPathname === $attrs.href }">
+  <a :class="{ active: pageContext.urlPathname === $attrs['href'] }">
     <slot />
   </a>
 </template>

__packages__/www/renderer/_default.page.server.ts

@@ -1,9 +1,10 @@
 import { renderToString } from '@vue/server-renderer'
-import { escapeInject, dangerouslySkipEscape } from 'vite-plugin-ssr'
+import { dangerouslySkipEscape, escapeInject } from 'vite-plugin-ssr'
+import type { PageContextBuiltIn } from 'vite-plugin-ssr'
+
 import { createApp } from './app'
 import logoUrl from './logo.svg'
 import type { PageContext } from './types'
-import type { PageContextBuiltIn } from 'vite-plugin-ssr'
 
 export { render }
 // See https://vite-plugin-ssr.com/data-fetching
@@ -14,9 +15,14 @@ async function render(pageContext: PageContextBuiltIn & PageContext) {
   const appHtml = await renderToString(app)
 
   // See https://vite-plugin-ssr.com/head
-  const { documentProps } = pageContext
-  const title = (documentProps && documentProps.title) || 'Vite SSR app'
-  const desc = (documentProps && documentProps.description) || 'App using Vite + vite-plugin-ssr'
+  const { documentProps = {} } = pageContext.pageExports as {
+    documentProps: {
+      title?: string
+      description?: string
+    }
+  }
+  const title = (documentProps.title) || 'Vite SSR app'
+  const desc = (documentProps.description) || 'App using Vite + vite-plugin-ssr'
 
   const documentHtml = escapeInject`<!DOCTYPE html>
     <html lang="en">

__packages__/www/renderer/fastify.ts

@@ -0,0 +1,48 @@
+import path from 'path';
+
+import { FastifyPluginAsync } from 'fastify';
+
+export const fastifyRenderRouter: FastifyPluginAsync<{
+  isProduction?: boolean;
+}> = async (app, { isProduction = false }) => {
+  const vite = await import('vite');
+  const { createPageRenderer } = await import('vite-plugin-ssr');
+  await app.register(import('@fastify/express'));
+  app.register(import('@fastify/compress'), { global: false });
+
+  const ROOT = path.join(__dirname, '..');
+
+  const viteDevServer = await vite.createServer({
+    root: ROOT,
+    server: { middlewareMode: 'ssr' },
+  });
+  app.use(viteDevServer.middlewares);
+
+  const renderPage = createPageRenderer({
+    viteDevServer,
+    isProduction,
+    root: ROOT,
+  });
+  app.get('*', async (req, res) => {
+    const url = req.raw.url || req.url;
+    const pageContextInit = {
+      url,
+    };
+    const pageContext = await renderPage(pageContextInit);
+    const { httpResponse } = pageContext;
+    if (!httpResponse) return;
+    const { body, statusCode, contentType } = httpResponse;
+    res.status(statusCode).type(contentType).compress(body);
+  });
+};
+
+async function main() {
+  const { default: fastify } = await import('fastify');
+  const app = fastify();
+  app.register(fastifyRenderRouter);
+  app.listen(3000);
+}
+
+if (require.main === module) {
+  main();
+}