💭

Nuxt3で複数ページを実装する

2022/05/17に公開

Nuxt3で複数ページを実装する方法をまとめました。

実装方法

pagesディレクトリを作成し、その下にindex.vueとabout.vueファイルを作成する。

各ファイルに内容を追記する。

index.vue

<template>
    <h1>index Page</h1>
</template>

about.vue

<template>
    <h1>about Page</h1>
</template>

app.vueを変更する

app.vue

<template>
  <div>
    <NuxtPage />
  </div>
</template>

デフォルトだと<NuxtWelcome />になっていると思いますが、
これを<NuxtPage />に変更します。これでルーティングが完了します。
（めっちゃ便利！！）

以上です。