feat(vue): add route key and meta to route context

This allows the developer to use their own key for the routeMap matching, as well as
provide meta data per route.
This also re-exports beforeEach handlers, so that they can be overridden in the virtual files.

Author: zanmato

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,