Nuxt 3 プロジェクトの作成
npx nuxi init <project-name>
実行すると新しくフォルダが作成されるので、そこへ移動してパッケージのインストールをします。
yarn dev
で localhost:3000
に開発環境が立ち上がります。
cd <project-name>
yarn install
yarn dev
ルートの自動作成
Nuxt 3 では pages
フォルダはオプションになりました。
有効にしたい場合はまず、app.vue
ファイルに<NuxtPage>
コンポーネントを追加します。
<template>
<div>
<NuxtLayout>
<NuxtPage/>
</NuxtLayout>
</div>
</template>
これで、pages
以下にコンポーネントファイルを置くと自動的にそのファイル名に応じたルートを作ってくれます。
pages/about.vue
という名前で以下のようなファイルを作成したとします。
<script setup>
</script>
<template>
<div>About Page</div>
</template>
するとlocalhost:3000/about
に飛ぶとこのコンポーネントが表示されます。
動的ルート
動的なルートをもつページを作りたい場合はファイル名にブラケットを使用します。
-| pages/
---| index.vue
---| users-[group]/
-----| [id].vue
上のようなフォルダ構造になっていて、[id].vue
ファイルを以下のようにするとします。
<template>
{{ $route.params.group }}
{{ $route.params.id }}
</template>
localhost:3000/users-admin/123
にアクセスすると以下のように表示されます。
admin 123
また、スクリプト内でルートオブジェクトにアクセスしたい場合はuseRoute
関数を使用します。
<script setup>
const route = useRoute()
if (route.params.group === 'admins' && !route.params.id) {
console.log('Warning! Make sure user is authenticated!')
}
</script>