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>