definePageMeta は、pages/ ディレクトリにある ページ コンポーネントのメタデータを設定するために使用できるコンパイラマクロです（別途設定されていない限り）。この方法で、Nuxt アプリケーションの各静的または動的ルートにカスタムメタデータを設定できます。

definePageMeta({
  layout: 'default'
})

型

definePageMeta(meta: PageMeta) => void

interface PageMeta {
  validate?: (route: RouteLocationNormalized) => boolean | Promise<boolean> | Partial<NuxtError> | Promise<Partial<NuxtError>>
  redirect?: RouteRecordRedirectOption
  name?: string
  path?: string
  props?: RouteRecordRaw['props']
  alias?: string | string[]
  pageTransition?: boolean | TransitionProps
  layoutTransition?: boolean | TransitionProps
  viewTransition?: boolean | 'always'
  key?: false | string | ((route: RouteLocationNormalizedLoaded) => string)
  keepalive?: boolean | KeepAliveProps
  layout?: false | LayoutKey | Ref<LayoutKey> | ComputedRef<LayoutKey>
  middleware?: MiddlewareKey | NavigationGuard | Array<MiddlewareKey | NavigationGuard>
  scrollToTop?: boolean | ((to: RouteLocationNormalizedLoaded, from: RouteLocationNormalizedLoaded) => boolean)
  [key: string]: unknown
}

パラメータ

meta

• 型: PageMeta

  以下のページメタデータを受け入れるオブジェクトです：

  name

  • 型: string

    このページのルートに名前を定義できます。デフォルトでは、pages/ ディレクトリ内のパスに基づいて名前が生成されます。

  path

  • 型: string

    ファイル名で表現できるよりも複雑なパターンがある場合、カスタム正規表現を定義できます。

  props

  • 型: RouteRecordRaw['props']

    ルートの params をページコンポーネントに渡されるプロパティとしてアクセスできるようにします。

  alias

  • 型: string | string[]

    レコードのエイリアス。レコードのコピーのように振る舞う追加のパスを定義できます。/users/:id や /u/:id のようなパスの省略形を持つことができます。すべての alias と path の値は同じパラメータを共有する必要があります。

  keepalive

  • 型: boolean | KeepAliveProps

    ルート変更時にページの状態を保持したい場合や、細かい制御のためにKeepAlivePropsを使用する場合に true に設定します。

  key

  • 型: false | string | ((route: RouteLocationNormalizedLoaded) => string)

    <NuxtPage> コンポーネントが再レンダリングされるタイミングをより制御したい場合に key 値を設定します。

  layout

  • 型: false | LayoutKey | Ref<LayoutKey> | ComputedRef<LayoutKey>

    各ルートのレイアウトの静的または動的な名前を設定します。デフォルトのレイアウトを無効にする必要がある場合は、false に設定できます。

  layoutTransition

  • 型: boolean | TransitionProps

    現在のレイアウトに適用するトランジションの名前を設定します。この値を false に設定してレイアウトトランジションを無効にすることもできます。

  middleware

  • 型: MiddlewareKey | NavigationGuard | Array<MiddlewareKey | NavigationGuard>

    definePageMeta 内で匿名または名前付きのミドルウェアを直接定義します。ルートミドルウェアについて詳しく学びましょう。

  pageTransition

  • 型: boolean | TransitionProps

    現在のページに適用するトランジションの名前を設定します。この値を false に設定してページトランジションを無効にすることもできます。

  viewTransition

  • 型: boolean | 'always'

    実験的機能であり、nuxt.config ファイルで有効にした場合のみ利用可能
    現在のページのビュー遷移を有効/無効にします。 true に設定すると、ユーザーのブラウザが prefers-reduced-motion: reduce に一致する場合、Nuxt はトランジションを適用しません（推奨）。always に設定すると、Nuxt は常にトランジションを適用します。

  redirect

  • 型: RouteRecordRedirectOption

    ルートが直接一致した場合にリダイレクトする場所。リダイレクトはナビゲーションガードの前に発生し、新しいターゲット位置で新しいナビゲーションをトリガーします。

  validate

  • 型: (route: RouteLocationNormalized) => boolean | Promise<boolean> | Partial<NuxtError> | Promise<Partial<NuxtError>>

    指定されたルートがこのページで有効にレンダリングできるかどうかを検証します。有効であれば true を返し、そうでなければ false を返します。他の一致が見つからない場合、これは 404 を意味します。また、statusCode/statusMessage を含むオブジェクトを直接返して、すぐにエラーで応答することもできます（他の一致はチェックされません）。

  scrollToTop

  • 型: boolean | (to: RouteLocationNormalized, from: RouteLocationNormalized) => boolean

    Nuxt にページをレンダリングする前にトップにスクロールするかどうかを指示します。Nuxt のデフォルトのスクロール動作を上書きしたい場合は、~/app/router.options.ts で行うことができます（詳細はカスタムルーティングを参照）。

  [key: string]

  • 型: any

    上記のプロパティに加えて、カスタムメタデータを設定することもできます。meta オブジェクトの型を拡張することで型安全な方法で行うことができます。

例

基本的な使用法

以下の例は次のことを示しています：

• key が値を返す関数である方法
• keepalive プロパティが複数のコンポーネント間を切り替える際に <modal> コンポーネントがキャッシュされないようにする方法
• pageType をカスタムプロパティとして追加する方法：

definePageMeta({
  key: (route) => route.fullPath,

  keepalive: {
    exclude: ['modal']
  },

  pageType: 'Checkout'
})

ミドルウェアの定義

以下の例は、definePageMeta 内で function を使用してミドルウェアを定義する方法、または middleware/ ディレクトリにあるミドルウェアファイル名に一致する string として設定する方法を示しています：

definePageMeta({
  // 関数としてミドルウェアを定義
  middleware: [
    function (to, from) {
      const auth = useState('auth')

      if (!auth.value.authenticated) {
          return navigateTo('/login')
      }

      if (to.path !== '/checkout') {
        return navigateTo('/checkout')
      }
    }
  ],

  // ... または文字列
  middleware: 'auth'

  // ... または複数の文字列
  middleware: ['auth', 'another-named-middleware']
})

カスタム正規表現の使用

カスタム正規表現は、重複するルート間の競合を解決する良い方法です。例えば：

2つのルート "/test-category" と "/1234-post" は、[postId]-[postSlug].vue と [categorySlug].vue のページルートの両方に一致します。

[postId]-[postSlug] ルートで postId に対して数字 (\d+) のみを一致させることを確認するために、次のように [postId]-[postSlug].vue ページテンプレートに追加できます：

definePageMeta({
  path: '/:postId(\\d+)-:postSlug' 
})

詳細な例については、Vue Router のマッチング構文を参照してください。

レイアウトの定義

デフォルトでlayouts/ ディレクトリにあるレイアウトのファイル名に一致するレイアウトを定義できます。また、layout を false に設定してレイアウトを無効にすることもできます：

definePageMeta({
  layout: 'admin' // layouts/admin.vue を使用
})

definePageMeta({
  middleware: 'auth' // middleware/auth.ts に認証ロジックを記述
})

definePageMeta({
  middleware: [
    (to, from) => {
      const user = useState('user')
      if (!user.value.isLoggedIn) {
        return navigateTo('/login')
      }
    }
  ]
})

definePageMeta({
  path: '/:postId(\\d+)-:postSlug'
})