feat(vue): add key and meta, and re-export createBeforeEachHandlers

packages/fastify-vue/context.js

@@ -25,6 +25,8 @@ export default class RouteContext {
     // Populated
     this.head = {}
     this.data = route.data
+    this.key = route.key
+    this.meta = route.meta
     this.state = null
     // Route settings
     this.layout = route.layout
@@ -51,6 +53,8 @@ export default class RouteContext {
       state: this.state,
       data: this.data,
       head: this.head,
+      key: this.key,
+      meta: this.meta,
       layout: this.layout,
       getMeta: this.getMeta,
       getData: this.getData,

packages/fastify-vue/rendering.js

@@ -6,7 +6,7 @@ import { createHtmlTemplates } from './templating.js'
 
 export async function createRenderFunction ({ routes, create }) {
   // Used when hydrating Vue Router on the client
-  const routeMap = Object.fromEntries(routes.map(_ => [_.path, _]))
+  const routeMap = Object.fromEntries(routes.map(_ => [_.key, _]))
   // Registered as reply.render()
   return function () {
     if (this.request.route.streaming) {

packages/fastify-vue/routing.js

@@ -41,7 +41,7 @@ export async function createRoute ({ client, errorHandler, route }, scope, confi
   }
 
   // Used when hydrating Vue Router on the client
-  const routeMap = Object.fromEntries(client.routes.map(_ => [_.path, _]))
+  const routeMap = Object.fromEntries(client.routes.map(_ => [_.key, _]))
 
   // Extend with route context initialization module
   RouteContext.extend(client.context)
@@ -139,7 +139,8 @@ export async function createRoute ({ client, errorHandler, route }, scope, confi
 
   if (route.getData) {
     // If getData is provided, register JSON endpoint for it
-    scope.get(`/-/data${routePath}`, {
+    const dataPath = (route.dataPath ?? route.path).replace(/:[^+]+\+/, '*')
+    scope.get(`/-/data${dataPath}`, {
       onRequest,
       async handler (req, reply) {
         reply.send(await route.getData(req.route))

packages/fastify-vue/server.js

@@ -6,6 +6,7 @@ class Routes extends Array {
       return {
         id: route.id,
         path: route.path,
+        key: route.key,
         name: route.name,
         layout: route.layout,
         getData: !!route.getData,
@@ -29,6 +30,7 @@ export async function createRoutes (fromPromise, { param } = { param: /\[([.\w]+
               id: routeDef.path,
               name: routeDef.path ?? routeModule.path,
               path: routeDef.path ?? routeModule.path,
+              key: routeDef.path ?? routeModule.path,
               ...routeModule,
             }
           }),
@@ -61,11 +63,13 @@ export async function createRoutes (fromPromise, { param } = { param: /\[([.\w]+
                   .replace(param, (_, m) => `:${m}`)
                   // Replace '/index' with '/'
                   .replace(/\/index$/, '/')
-                  // Remove trailing slashs
+                  // Remove trailing slashes
                   .replace(/(.+)\/+$/, (...m) => m[1]),
               ...routeModule,
             }
 
+            route.key = route.path
+
             if (route.name === '') {
               route.name = 'catch-all'
             }

packages/fastify-vue/virtual-ts/create.ts

@@ -4,8 +4,8 @@ import {
   createHistory,
   serverRouteContext,
   routeLayout,
-  createBeforeEachHandler,
 } from '@fastify/vue/client'
+import { createClientBeforeEachHandler, createServerBeforeEachHandler } from '$app/index.ts'
 import { createHead as createClientHead } from '@unhead/vue/client'
 import { createHead as createServerHead } from '@unhead/vue/server'
 
@@ -40,9 +40,12 @@ export default async function create (ctx) {
   }
 
   if (isServer) {
+    if (createServerBeforeEachHandler) {
+      router.beforeEach(createServerBeforeEachHandler(ctx))
+    }
     instance.provide(serverRouteContext, ctxHydration)
   } else {
-    router.beforeEach(createBeforeEachHandler(ctx, layoutRef))
+    router.beforeEach(createClientBeforeEachHandler(ctx, layoutRef))
   }
 
   instance.use(router)

packages/fastify-vue/virtual-ts/index.ts

@@ -1,4 +1,7 @@
 import { createRoutes } from '@fastify/vue/server'
+export { createBeforeEachHandler as createClientBeforeEachHandler } from '@fastify/vue/client'
+
+export const createServerBeforeEachHandler = null
 
 export default {
   routes: createRoutes(import('$app/routes.ts')),

packages/fastify-vue/virtual-ts/mount.ts

@@ -8,7 +8,7 @@ async function mountApp (...targets) {
   const ctxHydration = await extendContext(window.route, context)
   const resolvedRoutes = await hydrateRoutes(routes)
   const routeMap = Object.fromEntries(
-    resolvedRoutes.map((route) => [route.path, route]),
+    resolvedRoutes.map((route) => [route.key, route]),
   )
   const { instance, router } = await create({
     ctxHydration,

packages/fastify-vue/virtual/create.js

@@ -4,8 +4,8 @@ import {
   createHistory,
   serverRouteContext,
   routeLayout,
-  createBeforeEachHandler,
 } from '@fastify/vue/client'
+import { createClientBeforeEachHandler, createServerBeforeEachHandler } from '$app/index.js'
 import { createHead as createClientHead } from '@unhead/vue/client'
 import { createHead as createServerHead } from '@unhead/vue/server'
 
@@ -40,9 +40,12 @@ export default async function create (ctx) {
   }
 
   if (isServer) {
+    if (createServerBeforeEachHandler) {
+      router.beforeEach(createServerBeforeEachHandler(ctx))
+    }
     instance.provide(serverRouteContext, ctxHydration)
   } else {
-    router.beforeEach(createBeforeEachHandler(ctx, layoutRef))
+    router.beforeEach(createClientBeforeEachHandler(ctx, layoutRef))
   }
 
   instance.use(router)

packages/fastify-vue/virtual/index.js

@@ -1,4 +1,7 @@
 import { createRoutes } from '@fastify/vue/server'
+export { createBeforeEachHandler as createClientBeforeEachHandler } from '@fastify/vue/client'
+
+export const createServerBeforeEachHandler = null
 
 export default {
   routes: createRoutes(import('$app/routes.js')),

packages/fastify-vue/virtual/mount.js

@@ -9,7 +9,7 @@ async function mountApp (...targets) {
   const ctxHydration = await extendContext(window.route, context)
   const resolvedRoutes = await hydrateRoutes(routes)
   const routeMap = Object.fromEntries(
-    resolvedRoutes.map((route) => [route.path, route]),
+    resolvedRoutes.map((route) => [route.key, route]),
   )
   const { instance, router } = await create({
     ctxHydration,

starters/vue-i18n/.eslintignore

@@ -0,0 +1 @@
+dist

starters/vue-i18n/.eslintrc

@@ -0,0 +1,31 @@
+{
+  parser: '@babel/eslint-parser',
+  parserOptions: {
+    requireConfigFile: false,
+    ecmaVersion: 2021,
+    sourceType: 'module',
+    babelOptions: {
+      presets: ['@babel/preset-react'],
+   },
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  extends: [
+    'plugin:react/recommended',
+    'standard',
+  ],
+  plugins: [
+    'react',
+  ],
+  rules: {
+    'comma-dangle': ['error', 'always-multiline'],
+    'react/prop-types': 'off',
+    'import/no-absolute-path': 'off',
+  },
+  settings: {
+    react: {
+      version: '18.0',
+    },
+  },
+}

starters/vue-i18n/README.md

@@ -0,0 +1,3 @@
+<br>
+
+The official **[@fastify/vue](https://github.com/fastify/fastify-vite/tree/dev/packages/fastify-vue)** i18n starter template.