💭

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

2022/05/17に公開

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

(Nuxt3のインストールがまだの方はこちらの記事をお読みください。)
https://zenn.dev/one_dock/articles/7447952bffecf9

実装方法

STEP 1

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

STEP 2

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

index.vue
<template>
    <h1>index Page</h1>
</template>
about.vue
<template>
    <h1>about Page</h1>
</template>

STEP 3

app.vueを変更する

app.vue
<template>
  <div>
    <NuxtPage />
  </div>
</template>

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

以上です。

関連記事

Nuxt3にtailwindcss3を導入する方法をまとめました。
https://zenn.dev/one_dock/articles/e7a4364c90d28f

Discussion