feat(nuxt): allow enabling route props in definePageMeta (#29586)

2024-11-21 21:25:11 +00:00 · 2024-10-22 20:57:16 +08:00 · 2024-10-22 20:57:16 +08:00 · d275b382ec
commit d275b382ec
parent eaeda4ee1e
8 changed files with 116 additions and 5 deletions
--- a/docs/3.api/3.utils/define-page-meta.md
+++ b/docs/3.api/3.utils/define-page-meta.md
@ -30,6 +30,7 @@ interface PageMeta {
  redirect?: RouteRecordRedirectOption
  name?: string
  path?: string
+  props?: RouteRecordRaw['props']
  alias?: string | string[]
  pageTransition?: boolean | TransitionProps
  layoutTransition?: boolean | TransitionProps
@ -63,6 +64,12 @@ interface PageMeta {

    You may define a [custom regular expression](#using-a-custom-regular-expression) if you have a more complex pattern than can be expressed with the file name.

+  **`props`**
+  
+  - **Type**: [`RouteRecordRaw['props']`](https://router.vuejs.org/guide/essentials/passing-props)
+
+    Allows accessing the route `params` as props passed to the page component.
+
  **`alias`**

  - **Type**: `string | string[]`
--- a/packages/nuxt/src/pages/runtime/composables.ts
+++ b/packages/nuxt/src/pages/runtime/composables.ts
@ -1,6 +1,6 @@
 import type { KeepAliveProps, TransitionProps, UnwrapRef } from 'vue'
 import { getCurrentInstance } from 'vue'
-import type { RouteLocationNormalized, RouteLocationNormalizedLoaded, RouteRecordRedirectOption } from 'vue-router'
+import type { RouteLocationNormalized, RouteLocationNormalizedLoaded, RouteRecordRaw, RouteRecordRedirectOption } from 'vue-router'
 import { useRoute } from 'vue-router'
 import type { NitroRouteConfig } from 'nitro/types'
 import { useNuxtApp } from '#app/nuxt'
@ -37,6 +37,11 @@ export interface PageMeta {
  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
+  /**
+   * Allows accessing the route `params` as props passed to the page component.
+   * @see https://router.vuejs.org/guide/essentials/passing-props
+   */
+  props?: RouteRecordRaw['props']
  /** Set to `false` to avoid scrolling to top on page navigations */
  scrollToTop?: boolean | ((to: RouteLocationNormalizedLoaded, from: RouteLocationNormalizedLoaded) => boolean)
 }
--- a/packages/nuxt/src/pages/utils.ts
+++ b/packages/nuxt/src/pages/utils.ts
@ -190,7 +190,7 @@ export function extractScriptContent (html: string) {
 }

 const PAGE_META_RE = /definePageMeta\([\s\S]*?\)/
-const extractionKeys = ['name', 'path', 'alias', 'redirect'] as const
+const extractionKeys = ['name', 'path', 'props', 'alias', 'redirect'] as const
 const DYNAMIC_META_KEY = '__nuxt_dynamic_meta_key' as const

 const pageContentsCache: Record<string, string> = {}
@ -272,7 +272,7 @@ export async function getRouteMeta (contents: string, absolutePath: string): Pro
            continue
          }

-          if (property.value.type !== 'Literal' || typeof property.value.value !== 'string') {
+          if (property.value.type !== 'Literal' || (typeof property.value.value !== 'string' && typeof property.value.value !== 'boolean')) {
            console.debug(`[nuxt] Skipping extraction of \`${key}\` metadata as it is not a string literal or array of string literals (reading \`${absolutePath}\`).`)
            dynamicProperties.add(key)
            continue
@ -539,6 +539,7 @@ export function normalizeRoutes (routes: NuxtPage[], metaImports: Set<string> =
      const metaRoute: NormalizedRoute = {
        name: `${metaImportName}?.name ?? ${route.name}`,
        path: `${metaImportName}?.path ?? ${route.path}`,
+        props: `${metaImportName}?.props ?? false`,
        meta: `${metaImportName} || {}`,
        alias: `${metaImportName}?.alias || []`,
        redirect: `${metaImportName}?.redirect`,
@ -582,7 +583,7 @@ async function createClientPage(loader) {
        }

        // set to extracted value or delete if none extracted
-        for (const key of ['meta', 'alias', 'redirect'] satisfies NormalizedRouteKeys) {
+        for (const key of ['meta', 'alias', 'redirect', 'props'] satisfies NormalizedRouteKeys) {
          if (markedDynamic.has(key)) { continue }

          if (route[key] == null) {
--- a/packages/nuxt/test/snapshots/pages-override-meta-disabled.test.ts.snap
+++ b/packages/nuxt/test/snapshots/pages-override-meta-disabled.test.ts.snap
@ -6,6 +6,7 @@
      "meta": "{ ...(mockMeta || {}), ...{"someMetaData":true} }",
      "name": "mockMeta?.name ?? "pushed-route"",
      "path": "mockMeta?.path ?? "/"",
+      "props": "mockMeta?.props ?? false",
      "redirect": "mockMeta?.redirect",
    },
  ],
@ -24,6 +25,18 @@
      "meta": "{ ...(mockMeta || {}), ...{"test":1} }",
      "name": "mockMeta?.name ?? "page-with-meta"",
      "path": "mockMeta?.path ?? "/page-with-meta"",
+      "props": "mockMeta?.props ?? false",
+      "redirect": "mockMeta?.redirect",
+    },
+  ],
+  "route.meta props generate by file": [
+    {
+      "alias": "mockMeta?.alias || []",
+      "component": "() => import("pages/page-with-props.vue")",
+      "meta": "mockMeta || {}",
+      "name": "mockMeta?.name ?? "page-with-props"",
+      "path": "mockMeta?.path ?? "/page-with-props"",
+      "props": "mockMeta?.props ?? false",
      "redirect": "mockMeta?.redirect",
    },
  ],
@ -34,6 +47,7 @@
      "meta": "mockMeta || {}",
      "name": "mockMeta?.name ?? "test:name"",
      "path": "mockMeta?.path ?? "/test\\:name"",
+      "props": "mockMeta?.props ?? false",
      "redirect": "mockMeta?.redirect",
    },
  ],
@ -50,6 +64,7 @@
              "meta": "mockMeta || {}",
              "name": "mockMeta?.name ?? "param-index"",
              "path": "mockMeta?.path ?? """,
+              "props": "mockMeta?.props ?? false",
              "redirect": "mockMeta?.redirect",
            },
            {
@ -58,6 +73,7 @@
              "meta": "mockMeta || {}",
              "name": "mockMeta?.name ?? "param-index-sibling"",
              "path": "mockMeta?.path ?? "sibling"",
+              "props": "mockMeta?.props ?? false",
              "redirect": "mockMeta?.redirect",
            },
          ],
@ -65,6 +81,7 @@
          "meta": "mockMeta || {}",
          "name": "mockMeta?.name ?? undefined",
          "path": "mockMeta?.path ?? """,
+          "props": "mockMeta?.props ?? false",
          "redirect": "mockMeta?.redirect",
        },
        {
@ -73,6 +90,7 @@
          "meta": "mockMeta || {}",
          "name": "mockMeta?.name ?? "param-sibling"",
          "path": "mockMeta?.path ?? "sibling"",
+          "props": "mockMeta?.props ?? false",
          "redirect": "mockMeta?.redirect",
        },
      ],
@ -80,6 +98,7 @@
      "meta": "mockMeta || {}",
      "name": "mockMeta?.name ?? undefined",
      "path": "mockMeta?.path ?? "/param"",
+      "props": "mockMeta?.props ?? false",
      "redirect": "mockMeta?.redirect",
    },
    {
@ -91,6 +110,7 @@
          "meta": "mockMeta || {}",
          "name": "mockMeta?.name ?? "wrapper-expose-other"",
          "path": "mockMeta?.path ?? """,
+          "props": "mockMeta?.props ?? false",
          "redirect": "mockMeta?.redirect",
        },
        {
@ -99,6 +119,7 @@
          "meta": "mockMeta || {}",
          "name": "mockMeta?.name ?? "wrapper-expose-other-sibling"",
          "path": "mockMeta?.path ?? "sibling"",
+          "props": "mockMeta?.props ?? false",
          "redirect": "mockMeta?.redirect",
        },
      ],
@ -106,6 +127,7 @@
      "meta": "mockMeta || {}",
      "name": "mockMeta?.name ?? undefined",
      "path": "mockMeta?.path ?? "/wrapper-expose/other"",
+      "props": "mockMeta?.props ?? false",
      "redirect": "mockMeta?.redirect",
    },
  ],
@ -116,6 +138,7 @@
      "meta": "mockMeta || {}",
      "name": "mockMeta?.name ?? "home"",
      "path": "mockMeta?.path ?? "/"",
+      "props": "mockMeta?.props ?? false",
      "redirect": ""/"",
    },
  ],
@ -126,6 +149,7 @@
      "meta": "mockMeta || {}",
      "name": "mockMeta?.name ?? "slug"",
      "path": "mockMeta?.path ?? "/:slug(.*)*"",
+      "props": "mockMeta?.props ?? false",
      "redirect": "mockMeta?.redirect",
    },
    {
@ -134,6 +158,7 @@
      "meta": "mockMeta || {}",
      "name": "mockMeta?.name ?? "index"",
      "path": "mockMeta?.path ?? "/"",
+      "props": "mockMeta?.props ?? false",
      "redirect": "mockMeta?.redirect",
    },
  ],
@ -144,6 +169,7 @@
      "meta": "mockMeta || {}",
      "name": "mockMeta?.name ?? "index"",
      "path": "mockMeta?.path ?? "/"",
+      "props": "mockMeta?.props ?? false",
      "redirect": "mockMeta?.redirect",
    },
    {
@ -152,6 +178,7 @@
      "meta": "mockMeta || {}",
      "name": "mockMeta?.name ?? "slug"",
      "path": "mockMeta?.path ?? "/:slug()"",
+      "props": "mockMeta?.props ?? false",
      "redirect": "mockMeta?.redirect",
    },
    {
@ -163,6 +190,7 @@
          "meta": "mockMeta || {}",
          "name": "mockMeta?.name ?? "foo"",
          "path": "mockMeta?.path ?? """,
+          "props": "mockMeta?.props ?? false",
          "redirect": "mockMeta?.redirect",
        },
      ],
@ -170,6 +198,7 @@
      "meta": "mockMeta || {}",
      "name": "mockMeta?.name ?? undefined",
      "path": "mockMeta?.path ?? "/:foo?"",
+      "props": "mockMeta?.props ?? false",
      "redirect": "mockMeta?.redirect",
    },
    {
@ -178,6 +207,7 @@
      "meta": "mockMeta || {}",
      "name": "mockMeta?.name ?? "optional-opt"",
      "path": "mockMeta?.path ?? "/optional/:opt?"",
+      "props": "mockMeta?.props ?? false",
      "redirect": "mockMeta?.redirect",
    },
    {
@ -186,6 +216,7 @@
      "meta": "mockMeta || {}",
      "name": "mockMeta?.name ?? "optional-prefix-opt"",
      "path": "mockMeta?.path ?? "/optional/prefix-:opt?"",
+      "props": "mockMeta?.props ?? false",
      "redirect": "mockMeta?.redirect",
    },
    {
@ -194,6 +225,7 @@
      "meta": "mockMeta || {}",
      "name": "mockMeta?.name ?? "optional-opt-postfix"",
      "path": "mockMeta?.path ?? "/optional/:opt?-postfix"",
+      "props": "mockMeta?.props ?? false",
      "redirect": "mockMeta?.redirect",
    },
    {
@ -202,6 +234,7 @@
      "meta": "mockMeta || {}",
      "name": "mockMeta?.name ?? "optional-prefix-opt-postfix"",
      "path": "mockMeta?.path ?? "/optional/prefix-:opt?-postfix"",
+      "props": "mockMeta?.props ?? false",
      "redirect": "mockMeta?.redirect",
    },
    {
@ -210,6 +243,7 @@
      "meta": "mockMeta || {}",
      "name": "mockMeta?.name ?? "bar"",
      "path": "mockMeta?.path ?? "/:bar()"",
+      "props": "mockMeta?.props ?? false",
      "redirect": "mockMeta?.redirect",
    },
    {
@ -218,6 +252,7 @@
      "meta": "mockMeta || {}",
      "name": "mockMeta?.name ?? "nonopt-slug"",
      "path": "mockMeta?.path ?? "/nonopt/:slug()"",
+      "props": "mockMeta?.props ?? false",
      "redirect": "mockMeta?.redirect",
    },
    {
@ -226,6 +261,7 @@
      "meta": "mockMeta || {}",
      "name": "mockMeta?.name ?? "opt-slug"",
      "path": "mockMeta?.path ?? "/opt/:slug?"",
+      "props": "mockMeta?.props ?? false",
      "redirect": "mockMeta?.redirect",
    },
    {
@ -234,6 +270,7 @@
      "meta": "mockMeta || {}",
      "name": "mockMeta?.name ?? "sub-route-slug"",
      "path": "mockMeta?.path ?? "/:sub?/route-:slug()"",
+      "props": "mockMeta?.props ?? false",
      "redirect": "mockMeta?.redirect",
    },
  ],
@ -244,6 +281,7 @@
      "meta": "mockMeta || {}",
      "name": "mockMeta?.name ?? "stories"",
      "path": "mockMeta?.path ?? "/:stories(.*)*"",
+      "props": "mockMeta?.props ?? false",
      "redirect": "mockMeta?.redirect",
    },
    {
@ -252,6 +290,7 @@
      "meta": "mockMeta || {}",
      "name": "mockMeta?.name ?? "stories-id"",
      "path": "mockMeta?.path ?? "/stories/:id()"",
+      "props": "mockMeta?.props ?? false",
      "redirect": "mockMeta?.redirect",
    },
  ],
@ -262,6 +301,7 @@
      "meta": "mockMeta || {}",
      "name": "mockMeta?.name ?? "stories-id"",
      "path": "mockMeta?.path ?? "/stories/:id()"",
+      "props": "mockMeta?.props ?? false",
      "redirect": "mockMeta?.redirect",
    },
    {
@ -270,6 +310,7 @@
      "meta": "mockMeta || {}",
      "name": "mockMeta?.name ?? "stories"",
      "path": "mockMeta?.path ?? "/:stories(.*)*"",
+      "props": "mockMeta?.props ?? false",
      "redirect": "mockMeta?.redirect",
    },
  ],
@ -280,6 +321,7 @@
      "meta": "mockMeta || {}",
      "name": "mockMeta?.name ?? "kebab-case"",
      "path": "mockMeta?.path ?? "/kebab-case"",
+      "props": "mockMeta?.props ?? false",
      "redirect": "mockMeta?.redirect",
    },
  ],
@ -290,6 +332,7 @@
      "meta": "mockMeta || {}",
      "name": "mockMeta?.name ?? "snake_case"",
      "path": "mockMeta?.path ?? "/snake_case"",
+      "props": "mockMeta?.props ?? false",
      "redirect": "mockMeta?.redirect",
    },
  ],
@ -300,6 +343,7 @@
      "meta": "mockMeta || {}",
      "name": "mockMeta?.name ?? "index"",
      "path": "mockMeta?.path ?? "/"",
+      "props": "mockMeta?.props ?? false",
      "redirect": "mockMeta?.redirect",
    },
    {
@ -308,6 +352,7 @@
      "meta": "mockMeta || {}",
      "name": "mockMeta?.name ?? "parent"",
      "path": "mockMeta?.path ?? "/parent"",
+      "props": "mockMeta?.props ?? false",
      "redirect": "mockMeta?.redirect",
    },
    {
@ -316,6 +361,7 @@
      "meta": "mockMeta || {}",
      "name": "mockMeta?.name ?? "parent-child"",
      "path": "mockMeta?.path ?? "/parent/child"",
+      "props": "mockMeta?.props ?? false",
      "redirect": "mockMeta?.redirect",
    },
  ],
@ -329,6 +375,7 @@
          "meta": "mockMeta || {}",
          "name": "mockMeta?.name ?? "parent-child"",
          "path": "mockMeta?.path ?? "child"",
+          "props": "mockMeta?.props ?? false",
          "redirect": "mockMeta?.redirect",
        },
      ],
@ -336,6 +383,7 @@
      "meta": "mockMeta || {}",
      "name": "mockMeta?.name ?? "parent"",
      "path": "mockMeta?.path ?? "/parent"",
+      "props": "mockMeta?.props ?? false",
      "redirect": "mockMeta?.redirect",
    },
  ],
@ -346,6 +394,7 @@
      "meta": "mockMeta || {}",
      "name": "mockMeta?.name ?? "index"",
      "path": "mockMeta?.path ?? "/"",
+      "props": "mockMeta?.props ?? false",
      "redirect": "mockMeta?.redirect",
    },
    {
@ -357,6 +406,7 @@
          "meta": "mockMeta || {}",
          "name": "mockMeta?.name ?? "about"",
          "path": "mockMeta?.path ?? """,
+          "props": "mockMeta?.props ?? false",
          "redirect": "mockMeta?.redirect",
        },
      ],
@ -364,6 +414,7 @@
      "meta": "mockMeta || {}",
      "name": "mockMeta?.name ?? undefined",
      "path": "mockMeta?.path ?? "/about"",
+      "props": "mockMeta?.props ?? false",
      "redirect": "mockMeta?.redirect",
    },
  ],
@ -377,6 +428,7 @@
          "meta": "mockMeta || {}",
          "name": "mockMeta?.name ?? "index-index-all"",
          "path": "mockMeta?.path ?? "all"",
+          "props": "mockMeta?.props ?? false",
          "redirect": "mockMeta?.redirect",
        },
      ],
@ -384,6 +436,7 @@
      "meta": "mockMeta || {}",
      "name": "mockMeta?.name ?? "index"",
      "path": "mockMeta?.path ?? "/"",
+      "props": "mockMeta?.props ?? false",
      "redirect": "mockMeta?.redirect",
    },
  ],
@ -394,6 +447,7 @@
      "meta": "{ ...(mockMeta || {}), ...{"test":1} }",
      "name": "mockMeta?.name ?? "page-with-meta"",
      "path": "mockMeta?.path ?? "/page-with-meta"",
+      "props": "mockMeta?.props ?? false",
      "redirect": "mockMeta?.redirect",
    },
  ],
@ -404,6 +458,7 @@
      "meta": "mockMeta || {}",
      "name": "mockMeta?.name ?? "parent-child"",
      "path": "mockMeta?.path ?? "/parent/:child()"",
+      "props": "mockMeta?.props ?? false",
      "redirect": "mockMeta?.redirect",
    },
    {
@ -412,6 +467,7 @@
      "meta": "mockMeta || {}",
      "name": "mockMeta?.name ?? "parent-child"",
      "path": "mockMeta?.path ?? "/parent-:child()"",
+      "props": "mockMeta?.props ?? false",
      "redirect": "mockMeta?.redirect",
    },
  ],
@ -422,6 +478,7 @@
      "meta": "mockMeta || {}",
      "name": "mockMeta?.name ?? "foo"",
      "path": "mockMeta?.path ?? "/:foo?"",
+      "props": "mockMeta?.props ?? false",
      "redirect": "mockMeta?.redirect",
    },
    {
@ -430,6 +487,7 @@
      "meta": "mockMeta || {}",
      "name": "mockMeta?.name ?? "foo"",
      "path": "mockMeta?.path ?? "/:foo()"",
+      "props": "mockMeta?.props ?? false",
      "redirect": "mockMeta?.redirect",
    },
  ],
@ -440,6 +498,7 @@
      "meta": "mockMeta || {}",
      "name": "mockMeta?.name ?? "a1_1a"",
      "path": "mockMeta?.path ?? "/:a1_1a()"",
+      "props": "mockMeta?.props ?? false",
      "redirect": "mockMeta?.redirect",
    },
    {
@ -448,6 +507,7 @@
      "meta": "mockMeta || {}",
      "name": "mockMeta?.name ?? "b2.2b"",
      "path": "mockMeta?.path ?? "/:b2.2b()"",
+      "props": "mockMeta?.props ?? false",
      "redirect": "mockMeta?.redirect",
    },
    {
@ -456,6 +516,7 @@
      "meta": "mockMeta || {}",
      "name": "mockMeta?.name ?? "b2_2b"",
      "path": "mockMeta?.path ?? "/:b2()_:2b()"",
+      "props": "mockMeta?.props ?? false",
      "redirect": "mockMeta?.redirect",
    },
    {
@ -464,6 +525,7 @@
      "meta": "mockMeta || {}",
      "name": "mockMeta?.name ?? "c33c"",
      "path": "mockMeta?.path ?? "/:c33c?"",
+      "props": "mockMeta?.props ?? false",
      "redirect": "mockMeta?.redirect",
    },
    {
@ -472,6 +534,7 @@
      "meta": "mockMeta || {}",
      "name": "mockMeta?.name ?? "d44d"",
      "path": "mockMeta?.path ?? "/:d44d?"",
+      "props": "mockMeta?.props ?? false",
      "redirect": "mockMeta?.redirect",
    },
  ],
@ -482,6 +545,7 @@
      "meta": "mockMeta || {}",
      "name": "mockMeta?.name ?? "home"",
      "path": "mockMeta?.path ?? "/"",
+      "props": "mockMeta?.props ?? false",
      "redirect": "mockMeta?.redirect",
    },
  ],
@ -492,6 +556,7 @@
      "meta": "mockMeta || {}",
      "name": "mockMeta?.name ?? "index"",
      "path": "mockMeta?.path ?? "/"",
+      "props": "mockMeta?.props ?? false",
      "redirect": "mockMeta?.redirect",
    },
  ],
--- a/packages/nuxt/test/snapshots/pages-override-meta-enabled.test.ts.snap
+++ b/packages/nuxt/test/snapshots/pages-override-meta-enabled.test.ts.snap
@ -24,6 +24,13 @@
      "path": ""/page-with-meta"",
    },
  ],
+  "route.meta props generate by file": [
+    {
+      "component": "() => import("pages/page-with-props.vue")",
+      "name": ""page-with-props"",
+      "path": ""/page-with-props"",
+    },
+  ],
  "should allow pages with `:` in their path": [
    {
      "component": "() => import("pages/test:name.vue")",
--- a/packages/nuxt/test/page-metadata.test.ts
+++ b/packages/nuxt/test/page-metadata.test.ts
@ -211,6 +211,7 @@ describe('normalizeRoutes', () => {
        {
          name: indexN6pT4Un8hYMeta?.name ?? undefined,
          path: indexN6pT4Un8hYMeta?.path ?? "/",
+          props: indexN6pT4Un8hYMeta?.props ?? false,
          meta: { ...(indexN6pT4Un8hYMeta || {}), ...{"layout":"test","foo":"bar"} },
          alias: indexN6pT4Un8hYMeta?.alias || [],
          redirect: indexN6pT4Un8hYMeta?.redirect,
--- a/packages/nuxt/test/pages.test.ts
+++ b/packages/nuxt/test/pages.test.ts
@ -601,6 +601,30 @@ describe('pages:generateRoutesFromFiles', () => {
        },
      ],
    },
+    {
+      description: 'route.meta props generate by file',
+      files: [
+        {
+          path: `${pagesDir}/page-with-props.vue`,
+          template: `
+            <script setup lang="ts">
+            definePageMeta({
+              props: true
+            })
+            </script>
+          `,
+        },
+      ],
+      output: [
+        {
+          name: 'page-with-props',
+          path: '/page-with-props',
+          file: `${pagesDir}/page-with-props.vue`,
+          children: [],
+          props: true,
+        },
+      ],
+    },
    {
      description: 'should handle route groups',
      files: [
--- a/packages/schema/src/types/hooks.ts
+++ b/packages/schema/src/types/hooks.ts
@ -8,7 +8,7 @@ import type { Import, InlinePreset, Unimport } from 'unimport'
 import type { Compiler, Configuration, Stats } from 'webpack'
 import type { Nitro, NitroConfig } from 'nitro/types'
 import type { Schema, SchemaDefinition } from 'untyped'
-import type { RouteLocationRaw } from 'vue-router'
+import type { RouteLocationRaw, RouteRecordRaw } from 'vue-router'
 import type { VueCompilerOptions } from '@vue/language-core'
 import type { NuxtCompatibility, NuxtCompatibilityIssues, ViteConfig } from '..'
 import type { Component, ComponentsOptions } from './components'
@ -28,6 +28,7 @@ export type VueTSConfig = 0 extends 1 & VueCompilerOptions ? TSConfig : TSConfig
 export type NuxtPage = {
  name?: string
  path: string
+  props?: RouteRecordRaw['props']
  file?: string
  meta?: Record<string, any>
  alias?: string[] | string