definePageMeta

definePageMeta は、pages/ ディレクトリにある**ページ**コンポーネントのメタデータを設定するために使用できるコンパイラマクロです（そうでない場合を除く）。これにより、Nuxt アプリケーションの静的または動的ルートごとにカスタムメタデータを設定できます。

<script setup lang="ts">
definePageMeta({
  layout: 'default'
})
</script>

型

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 に、ページコンポーネントに渡される props としてアクセスできます。
  
  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
    現在のページに適用するトランジションの名前を設定します。ペー robustジトランジションを無効にするには、この値を 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 をカスタムプロパティとして追加する方法を示しています

<script setup lang="ts">
definePageMeta({
  key: (route) => route.fullPath,

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

  pageType: 'Checkout'
})
</script>

ミドルウェアの定義

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

<script setup lang="ts">
definePageMeta({
  // define middleware as a function
  middleware: [
    function (to, from) {
      const auth = useState('auth')

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

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

  // ... or a string
  middleware: 'auth'

  // ... or multiple strings
  middleware: ['auth', 'another-named-middleware']
})
</script>

カスタム正規表現の使用

カスタム正規表現は、重複するルート間の競合を解決するのに適した方法です。たとえば、

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

[postId]-[postSlug] ルートの postId に数字（\d+）のみを一致させるには、[postId]-[postSlug].vue ページテンプレートに以下を追加します

<script setup lang="ts">
definePageMeta({
  path: '/:postId(\\d+)-:postSlug' 
})
</script>

その他の例については、Vue Router の一致構文 を参照してください。

レイアウトの定義

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

<script setup lang="ts">
definePageMeta({
  // set custom layout
  layout: 'admin'

  // ... or disable a default layout
  layout: false
})
</script>