feat: Inject custom properties in SSR context. Closes #5

core/entry-server.js

@@ -39,12 +39,14 @@ export default function (App, { routes, base }, hook) {
 
     await router.isReady()
 
-    const initialState = JSON.stringify(
-      router.currentRoute.value.meta.state || {}
-    )
+    // This can be injected with useSSRContext() in setup functions
+    const context = {
+      request,
+      ...extra,
+      initialState: router.currentRoute.value.meta.state || {},
+    }
 
-    const ctx = {}
-    let html = await renderToString(app, ctx)
+    let html = await renderToString(app, context)
 
     const [helmet = ''] = html.match(/<html[^>]*?>(.|\s)*?<\/html>/im) || []
     let [, head = ''] = helmet.match(/<head[^>]*?>((.|\s)*?)<\/head>/im) || []
@@ -59,11 +61,15 @@ export default function (App, { routes, base }, hook) {
       html = html.replace(helmet, '<!---->')
     }
 
-    const dependencies = manifest ? findDependencies(ctx.modules, manifest) : []
+    const dependencies = manifest
+      ? findDependencies(context.modules, manifest)
+      : []
     if (preload && dependencies.length > 0) {
       head += renderPreloadLinks(dependencies)
     }
 
+    const initialState = JSON.stringify(context.initialState || {})
+
     return {
       // This string is replaced at build time
       // and injects all the previous variables.

example/src/pages/Homepage.vue

@@ -14,7 +14,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'Homepage',
   props: {
     server: {
@@ -27,11 +29,19 @@ export default {
     },
   },
   setup() {
+    // This will be removed from the client build
+    if (import.meta.env.SSR) {
+      // Vite/plugin-vue is injecting this function in the setup scope
+      const { initialState } = useSSRContext()
+      // Initial state is mutable and will be hydrated in the client
+      initialState.perkele = true
+    }
+
     return {
       json: JSON.stringify({ something: true }),
     }
   },
-}
+})
 </script>
 
 <style scoped>