definePageMeta は、app/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

    このページのルートに名前を定義できます。デフォルトでは、app/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のデフォルトのスクロール動作を上書きしたい場合は、~/router.options.ts で行うことができます（詳細はカスタムルーティングを参照してください）。

  [key: string]

  • 型: any

    上記のプロパティ以外にも、カスタムメタデータを設定できます。meta オブジェクトの型を拡張することで、型安全な方法で行うことができます（詳細はカスタムメタデータの型付けを参照してください）。

例

基本的な使用法

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

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

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

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

  pageType: 'Checkout'
})

ミドルウェアの定義

以下の例は、definePageMeta 内で function を使用してミドルウェアを定義する方法、または app/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のマッチング構文を参照してください。

レイアウトの定義

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

definePageMeta({
  // カスタムレイアウトを設定
  layout: 'admin'

  // ... またはデフォルトのレイアウトを無効にする
  layout: false
})