definePageMeta

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

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

タイプ

export function 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/ ディレクトリ内のパスに基づいて生成されます。
  
  パス
  • 型: string
    ファイル名で表現できるよりも複雑なパターンがある場合は、カスタム正規表現を定義できます。
  
  プロップ
  • タイプ: RouteRecordRaw['props']
    ルートの params をページコンポーネントに渡される props としてアクセスできるようにします。
  
  alias
  • タイプ: string | string[]
    レコードのエイリアス。レコードのコピーとして機能する追加のパスを定義できます。/users/:id や /u/:id のようなパスの省略形を持つことができます。alias と path のすべての値は同じ params を共有する必要があります。
  
  keepalive
  • タイプ: boolean |KeepAliveProps
    ルート変更全体でページの状態を保持したい場合、またはKeepAliveProps詳細な制御のために使用する場合は true に設定します。
  
  キー
  • タイプ: false | string | ((route: RouteLocationNormalizedLoaded) => string)
<NuxtPage> コンポーネントが再レンダリングされるタイミングをより細かく制御する必要がある場合は、key 値を設定します。
  
  レイアウト
  • タイプ: 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 をカスタムプロパティとして追加する例を示しています。

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

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

  pageType: 'Checkout',
})
</script>

ミドルウェアの定義

以下の例は、definePageMeta 内で直接 function を使用してミドルウェアを定義する方法、または app/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>

カスタム正規表現の使用

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

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

[postId]-[postSlug] ルートで postId に対して数字（\d+）のみをマッチさせるために、[postId]-[postSlug].vue ページテンプレートに次を追加できます。

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

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

レイアウトの定義

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

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

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