💭
Nuxt3で複数ページを実装する
Nuxt3で複数ページを実装する方法をまとめました。
(Nuxt3のインストールがまだの方はこちらの記事をお読みください。)
実装方法
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を導入する方法をまとめました。
Discussion