使用法

ページはVueコンポーネントであり、Nuxtがサポートする任意の有効な拡張子を持つことができます（デフォルトでは.vue、.js、.jsx、.mjs、.ts、または.tsx）。

Nuxtは、~/pages/ディレクトリ内のすべてのページに対して自動的にルートを作成します。

<template>
  <h1>インデックスページ</h1>
</template>

app/pages/index.vueファイルは、アプリケーションの/ルートにマッピングされます。

app.vueを使用している場合は、現在のページを表示するために<NuxtPage/>コンポーネントを使用してください。

<template>
  <div>
    <!-- すべてのページで共有されるマークアップ例: ナビゲーションバー -->
    <NuxtPage />
  </div>
</template>

ページは、ページ間のルート遷移を可能にするために単一のルート要素を持たなければなりません。HTMLコメントも要素と見なされます。

これは、ルートがサーバーレンダリングまたは静的生成されたときにその内容を正しく見ることができますが、クライアントサイドのナビゲーション中にそのルートに移動すると、ルート間の遷移が失敗し、ルートがレンダリングされないことを意味します。

単一のルート要素を持つページの例を以下に示します。

<template>
  <div>
    <!-- このページは正しく単一のルート要素のみを持っています -->
    ページの内容
  </div>
</template>

動的ルート

角括弧内に何かを置くと、それは動的ルートパラメータに変わります。複数のパラメータや非動的なテキストをファイル名やディレクトリ内で組み合わせることができます。

パラメータを_オプション_にしたい場合は、二重角括弧で囲む必要があります。例えば、~/pages/[[slug]]/index.vueや~/pages/[[slug]].vueは、/と/testの両方にマッチします。

-| pages/
---| index.vue
---| users-[group]/
-----| [id].vue

上記の例では、コンポーネント内で$routeオブジェクトを介してgroup/idにアクセスできます。

<template>
  <p>{{ $route.params.group }} - {{ $route.params.id }}</p>
</template>

/users-admins/123に移動すると、次のようにレンダリングされます。

<p>admins - 123</p>

Composition APIを使用してルートにアクセスしたい場合は、Options APIのthis.$routeのようにルートにアクセスできるグローバルなuseRoute関数があります。

const route = useRoute()

if (route.params.group === 'admins' && !route.params.id) {
  console.log('警告！ユーザーが認証されていることを確認してください！')
}

キャッチオールルート

キャッチオールルートが必要な場合は、[...slug].vueのように名前を付けたファイルを使用して作成します。これにより、そのパスの_すべて_のルートにマッチします。

<template>
  <p>{{ $route.params.slug }}</p>
</template>

/hello/worldに移動すると、次のようにレンダリングされます。

<p>["hello", "world"]</p>

ネストされたルート

<NuxtPage>を使用してネストされたルートを表示することができます。

例:

-| pages/
---| parent/
-----| child.vue
---| parent.vue

このファイルツリーは次のルートを生成します。

[
  {
    path: '/parent',
    component: '~/pages/parent.vue',
    name: 'parent',
    children: [
      {
        path: 'child',
        component: '~/pages/parent/child.vue',
        name: 'parent-child'
      }
    ]
  }
]

child.vueコンポーネントを表示するには、app/pages/parent.vue内に<NuxtPage>コンポーネントを挿入する必要があります。

<template>
  <div>
    <h1>私は親ビューです</h1>
    <NuxtPage :foobar="123" />
  </div>
</template>

const props = defineProps(['foobar'])

console.log(props.foobar)

子ルートキー

<NuxtPage>コンポーネントが再レンダリングされるタイミングをより制御したい場合（例えば、トランジションのため）、pageKeyプロップを介して文字列または関数を渡すか、definePageMetaを使用してkey値を定義できます。

<template>
  <div>
    <h1>私は親ビューです</h1>
    <NuxtPage :page-key="route => route.fullPath" />
  </div>
</template>

または、次のようにします。

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

ルートグループ

場合によっては、ファイルベースのルーティングに影響を与えない方法で一連のルートをグループ化したいことがあります。この目的のために、ファイルを括弧で囲んだフォルダに入れることができます - (と)。

例:

-| pages/
---| index.vue
---| (marketing)/
-----| about.vue
-----| contact.vue

これにより、アプリ内で/、/about、/contactページが生成されます。marketingグループはURL構造の目的では無視されます。

ページメタデータ

アプリ内の各ルートにメタデータを定義したい場合があります。これを行うには、definePageMetaマクロを使用します。これは<script>および<script setup>の両方で機能します。

definePageMeta({
  title: '私のホームページ'
})

このデータは、その後、アプリの他の部分でroute.metaオブジェクトからアクセスできます。

const route = useRoute()

console.log(route.meta.title) // 私のホームページ

ネストされたルートを使用している場合、これらのルートのページメタデータはすべて単一のオブジェクトにマージされます。ルートメタについての詳細は、vue-routerのドキュメントを参照してください。

defineEmitsやdefineProps（Vueドキュメントを参照）と同様に、definePageMetaはコンパイラマクロです。コンポーネント内で参照することはできません。代わりに、渡されたメタデータはコンポーネントの外に持ち上げられます。 したがって、ページメタオブジェクトはコンポーネントを参照できません。ただし、インポートされたバインディングやローカルに定義された純粋な関数を参照することはできます。

import { someData } from '~/utils/example'

function validateIdParam(route) {
  return route.params.id && !isNaN(Number(route.params.id))
}

const title = ref('')

definePageMeta({
  validate: validateIdParam,
  someData,
  title,    // これを行わないでください。refはコンポーネントの外に持ち上げられます
})

特殊なメタデータ

もちろん、アプリ全体で独自の使用のためにメタデータを定義することは歓迎されます。しかし、definePageMetaで定義された一部のメタデータには特定の目的があります。

alias

ページのエイリアスを定義できます。これにより、異なるパスから同じページにアクセスできます。これは、vue-routerのドキュメントで定義されているように、文字列または文字列の配列にすることができます。

keepalive

definePageMetaでkeepalive: trueを設定すると、Nuxtは自動的にページをVueの<KeepAlive>コンポーネントでラップします。これは、例えば、動的な子ルートを持つ親ルートで、ルート変更時にページの状態を保持したい場合に便利です。

親ルートの状態を保持することが目的の場合、この構文を使用します: <NuxtPage keepalive />。また、<KeepAlive>に渡すプロップを設定することもできます（完全なリストを参照）。

このプロパティのデフォルト値をあなたのnuxt.configで設定できます。

key

上記を参照。

layout

ルートをレンダリングするために使用されるレイアウトを定義できます。これは、任意のレイアウトを無効にするためのfalse、文字列、または何らかの方法でリアクティブにしたい場合はref/computedにすることができます。レイアウトについての詳細。

layoutTransitionとpageTransition

ページやレイアウトをラップする<transition>コンポーネントのトランジションプロパティを定義することができます。また、そのルートの<transition>ラッパーを無効にするためにfalseを渡すこともできます。渡すことができるオプションのリストを参照するか、トランジションの動作についての詳細を読むことができます。

これらのプロパティのデフォルト値をあなたのnuxt.configで設定できます。

middleware

このページを読み込む前に適用するミドルウェアを定義できます。これは、任意の親/子ルートで使用される他のすべてのミドルウェアとマージされます。これは、文字列、関数（グローバルbeforeガードパターンに従った匿名/インラインミドルウェア関数）、または文字列/関数の配列にすることができます。名前付きミドルウェアについての詳細。

name

このページのルートの名前を定義することができます。

path

ファイル名で表現できるよりも複雑なパターンがある場合、パスマッチャーを定義することができます。詳細はvue-routerのドキュメントを参照してください。

props

ルートparamsをページコンポーネントに渡されるプロップとしてアクセスできるようにします。詳細はvue-routerのドキュメントを参照してください。

カスタムメタデータの型付け

ページにカスタムメタデータを追加する場合、型安全な方法で行いたいかもしれません。definePageMetaで受け入れられるオブジェクトの型を拡張することが可能です。

declare module '#app' {
  interface PageMeta {
    pageType?: string
  }
}

// 型を拡張する際には、何かをインポート/エクスポートすることを常に確認してください
export {}

ナビゲーション

アプリのページ間をナビゲートするには、<NuxtLink>コンポーネントを使用する必要があります。

このコンポーネントはNuxtに含まれているため、他のコンポーネントのようにインポートする必要はありません。

app/pagesフォルダ内のindex.vueページへのシンプルなリンク:

<template>
  <NuxtLink to="/">ホームページ</NuxtLink>
</template>

プログラムによるナビゲーション

NuxtはnavigateTo()ユーティリティメソッドを通じてプログラムによるナビゲーションを可能にします。このユーティリティメソッドを使用すると、アプリ内でユーザーをプログラム的にナビゲートできます。これは、ユーザーからの入力を受け取り、アプリケーション全体を動的にナビゲートするのに最適です。この例では、ユーザーが検索フォームを送信したときに呼び出されるシンプルなメソッドnavigate()があります。

const name = ref('');
const type = ref(1);

function navigate(){
  return navigateTo({
    path: '/search',
    query: {
      name: name.value,
      type: type.value
    }
  })
}

クライアント専用ページ

.client.vueサフィックスを付けることで、ページをクライアント専用として定義できます。このページの内容はサーバーでレンダリングされません。

サーバー専用ページ

.server.vueサフィックスを付けることで、ページをサーバー専用として定義できます。クライアントサイドのナビゲーションを使用してページに移動することはできますが、vue-routerによって制御され、サーバーコンポーネントで自動的にレンダリングされるため、ページをレンダリングするために必要なコードはクライアントサイドのバンドルには含まれません。

カスタムルーティング

アプリが大きくなり、より複雑になるにつれて、ルーティングにより多くの柔軟性が必要になるかもしれません。このため、Nuxtはルーター、ルート、およびルーターオプションをさまざまな方法でカスタマイズするために直接公開しています。

複数のページディレクトリ

デフォルトでは、すべてのページはプロジェクトのルートにある1つのapp/pagesディレクトリにあるべきです。

ただし、Nuxt Layersを使用して、アプリのページのグループを作成することができます。

-| some-app/
---| nuxt.config.ts
---| pages/
-----| app-page.vue
-| nuxt.config.ts

// some-app/nuxt.config.ts
export default defineNuxtConfig({
})

export default defineNuxtConfig({
  extends: ['./some-app'],
})