extendRoute(): route.meta always empty

[grillonbleu]

I’m trying to process route.meta further with extendRoute() in my vite.config.js, but it always comes up empty even though the pages contain a definePage() which defines some meta data. The meta is present later when I import routes from vue-router/auto-routes though. Is this the wrong way to apply a post processing to the route tree? (This is just a minimal viable example. My current end goal is moving some meta on directory nodes & using the generated routes for more than routing, e.g. menus).

vite.config.js:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueRouter from 'unplugin-vue-router/vite'

// https://vitejs.dev/config/
export default defineConfig({
  base: "./",
  plugins: [
    VueRouter({
      extendRoute(route) {
        console.log("Node meta", route.meta);
      }
    }),
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

src/pages/about.vue

<script setup>
definePage({
    meta: {
        title: "About us (ok it’s just me)"
    }
});
</script>
<template>
    <h1>About</h1>
</template>

src/pages/index.vue

<script setup>
definePage({
    meta: {
        title: "Home sweet home"
    }
});
</script>
<template>
    <h1>Home</h1>
</template>

On npm run build:

> [email protected] build
> vite build

vite v5.4.8 building for production...
Node meta {}
Node meta {}
✓ 30 modules transformed.
dist/index.html                 0.36 kB │ gzip:  0.26 kB
dist/assets/index-BtasVrSb.js   0.14 kB │ gzip:  0.14 kB
dist/assets/about-CIewwtgq.js   0.14 kB │ gzip:  0.15 kB
dist/assets/index-DWnmdu9n.js  85.98 kB │ gzip: 34.09 kB
✓ built in 735ms

[posva]

This is because extendRoute is a build time function. It doesn’t have access to the meta you defined. In your case, you will have to move this feature a runtime loop. This could be documented on the meta property

If you really need to do a build time change (for types), I would try to find a way to provide that information from the page components organization rather than meta

[grillonbleu]

Thanks for you the quick response! I was looking into unplugin-vue-router’s source and I fell on this comment about EditableTreeNode::meta:

unplugin-vue-router/src/core/extendRoutes.ts

Lines 108 to 113 in 5ec4076

	/**
	* Meta property of the route as an object. Note this property is readonly and will be serialized as JSON. It won't contain the meta properties defined with `definePage()` as it could contain expressions **but it does contain the meta properties defined with `<route>` blocks**.
	*/
	get meta(): Readonly<RouteMeta> {
	return this.node.metaAsObject
	}

So I tried putting the meta in a page like this:

<route>
{
    meta: {
        title: "About us (actually it’s just me)"
    }
}
</route>
<template>
    <h1>About</h1>
</template>

And it shows up in extendRoute()! 🥳 Can I depend on meta defined in a route block to be always accessible at build time by extendRoute()?

[posva]

Oh so I already documented it then! And yeah, if it works that way it will keep working