diff --git a/docs/content/2.guide/2.directory-structure/1.pages.md b/docs/content/2.guide/2.directory-structure/1.pages.md index 669245b66d3..48cfc371b3e 100644 --- a/docs/content/2.guide/2.directory-structure/1.pages.md +++ b/docs/content/2.guide/2.directory-structure/1.pages.md @@ -266,6 +266,10 @@ definePageMeta({ Of course, you are welcome to define metadata for your own use throughout your app. But some metadata defined with `definePageMeta` has a particular purpose: +#### `alias` + +You can define page aliases. They allow you to access the same page from different paths. It can be either a string or an array of strings as defined [here](https://router.vuejs.org/guide/essentials/redirect-and-alias.html#alias) on vue-router documentation. + #### `keepalive` Nuxt will automatically wrap your page in [the Vue `` component](https://vuejs.org/guide/built-ins/keep-alive.html#keepalive) if you set `keepalive: true` in your `definePageMeta`. This might be useful to do, for example, in a parent route that has dynamic child routes, if you want to preserve page state across route changes. @@ -282,19 +286,23 @@ You can set a default value for this property [in your `nuxt.config`](/api/confi You can define the layout used to render the route. This can be either false (to disable any layout), a string or a ref/computed, if you want to make it reactive in some way. [More about layouts](/guide/directory-structure/layouts). -#### `middleware` - -You can define middleware to apply before loading this page. It will be merged with all the other middleware used in any matching parent/child routes. It can be a string, a function (an anonymous/inlined middleware function following [the global before guard pattern](https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards)), or an array of strings/functions. [More about named middleware](/guide/directory-structure/middleware). - #### `layoutTransition` and `pageTransition` You can define transition properties for the `` component that wraps your pages and layouts, or pass `false` to disable the `` wrapper for that route. You can see a list of options that can be passed [here](https://vuejs.org/api/built-in-components.html#transition) or read [more about how transitions work](https://vuejs.org/guide/built-ins/transition.html#transition). You can set default values for these properties [in your `nuxt.config`](/api/configuration/nuxt-config#layouttransition). -#### `alias` +#### `middleware` -You can define page aliases. They allow you to access the same page from different paths. It can be either a string or an array of strings as defined [here](https://router.vuejs.org/guide/essentials/redirect-and-alias.html#alias) on vue-router documentation. +You can define middleware to apply before loading this page. It will be merged with all the other middleware used in any matching parent/child routes. It can be a string, a function (an anonymous/inlined middleware function following [the global before guard pattern](https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards)), or an array of strings/functions. [More about named middleware](/guide/directory-structure/middleware). + +#### `name` + +You may define a name for this page's route. + +#### `path` + +You may define a path matcher, if you have a more complex pattern than can be expressed with the file name. See [the `vue-router` docs](https://router.vuejs.org/guide/essentials/route-matching-syntax.html#custom-regex-in-params) for more information. ### Typing Custom Metadata diff --git a/packages/nuxt/src/pages/runtime/composables.ts b/packages/nuxt/src/pages/runtime/composables.ts index 6c517be0443..740fb991f5e 100644 --- a/packages/nuxt/src/pages/runtime/composables.ts +++ b/packages/nuxt/src/pages/runtime/composables.ts @@ -29,6 +29,10 @@ export interface PageMeta { layoutTransition?: boolean | TransitionProps key?: false | string | ((route: RouteLocationNormalizedLoaded) => string) keepalive?: boolean | KeepAliveProps + /** You may define a name for this page's route. */ + name?: string + /** You may define a path matcher, if you have a more complex pattern than can be expressed with the file name. */ + path?: string /** Set to `false` to avoid scrolling to top on page navigations */ scrollToTop?: boolean } diff --git a/packages/nuxt/src/pages/utils.ts b/packages/nuxt/src/pages/utils.ts index e52e6b76cbc..3626d4976c3 100644 --- a/packages/nuxt/src/pages/utils.ts +++ b/packages/nuxt/src/pages/utils.ts @@ -240,6 +240,8 @@ export function normalizeRoutes (routes: NuxtPage[], metaImports: Set = return { ...Object.fromEntries(Object.entries(route).map(([key, value]) => [key, JSON.stringify(value)])), + name: `${metaImportName}?.name ?? ${route.name ? JSON.stringify(route.name) : 'undefined'}`, + path: `${metaImportName}?.path ?? ${JSON.stringify(route.path)}`, children: route.children ? normalizeRoutes(route.children, metaImports).routes : [], meta: route.meta ? `{...(${metaImportName} || {}), ...${JSON.stringify(route.meta)}}` : metaImportName, alias: aliasCode,