Nuxt3のインストール＆基本機能の確認

はじめに

公式の手順に従って Nuxt3 をインストールしてみました。
ちなみに記事を書いた時点の Nuxt3 のバージョンは v3.0.0-rc.12 です。

開発環境は以下の通りです。

OS	Windows 11
Node.js	v16.18.0
Yarn	v1.22.19
Editor	Visual Studio Code
VSCode拡張機能	Vue Language Features (Volar) TypeScript Vue Plugin (Volar)

また、インストール後に基本機能についても触れてみましたので参考になれば幸いです。

Nuxt3のインストール

新規プロジェクトの作成

VSCodeを開いて、ターミナルで以下のコマンドを実行します。
途中で nuxi（NuxtのCLI）のインストール有無を聞かれるので、「y」を入力して続行してください。

> npx nuxi init nuxt-app
Need to install the following packages:
  nuxi@3.0.0-rc.12
Ok to proceed? (y) y
Nuxi 3.0.0-rc.12
✨ Nuxt project is created with v3 template. Next steps:
 › cd nuxt-app
 › Install dependencies with npm install or yarn install or pnpm install --shamefully-hoist
 › Start development server with npm run dev or yarn dev or pnpm run dev

Next stepsに表示されたコマンドを実行していきます。

cd nuxt-app
yarn install
yarn dev

http://localhost:3000 にアクセスすると画面が表示されます。
ちなみに yarn dev -o と実行すると自動でブラウザが起動して画面が表示されます。

基本機能の確認

コンポーネント／ページ／レイアウトの作成

必要に応じて以下のディレクトリを作成し、その配下にvueファイルを作成していきます。

• 各画面で使用する部品　→　components ディレクトリ
• URLごとに表示する画面　→　pages ディレクトリ
• 共通で使用するレイアウト　→　layouts ディレクトリ

Nuxt2 ではインストール時に components や pages ディレクトリが存在していましたが、Nuxt3 では自分で作成する必要があります。

ルーティング

Nuxt2 では _id.vue と命名することでURLから動的な値を渡すことが可能でしたが、Nuxt3 では [id].vue で同様の処理が可能です。
また、以下のように記述することで動的な値に対してバリデーションが可能です。

<script setup lang="ts">
definePageMeta({
  validate: async (route) => {
    const id = route.params.id;                         // URLに指定した値
    return typeof id === "string" && /^\d+$/.test(id);  // 数値のみOK
  },
});
</script>

データ取得

Nuxt2 では @nuxt/http や @nuxt/axios 等のライブラリが推奨されていましたが、Nuxt3では既に用意されている useFetch() または useAsyncdata() を用いてデータ取得できます。

useFetch()

パラメータとしてURLを指定すればデータを取得することができます。

<script setup>
const { data: users } = await useFetch("/api/users");
</script>

<template>
  <ul>
    <li v-for="user in users">{{ user.name }}</li>
  </ul>
</template>

useAsyncdata()

useFetch()よりも複雑な処理を行いたいときに利用します。

<script setup>
const { data: users } = await useAsyncData("users", () => $fetch("/api/users"));
</script>

<template>
  <ul>
    <li v-for="user in users">{{ user.name }}</li>
  </ul>
</template>

useFetch(url) と useAsyncData(url, () => $fetch(url)) は、ほぼ同じ意味です。
状況に応じて、それぞれ使い分ける必要がありそうです。

状態管理

Nuxt2 では Vuex を使用して状態管理を行っておりましたが、Nuxt3 では useState() を用います。

Nuxt2で作成していた store ディレクトリは存在せず、Nuxt3 では composables ディレクトリに状態管理するためのファイルを作成します。

composables/index.ts

export const useNumbers = () => {
  return useState("numbers", () => []);
};

pages/index.vue

<script setup>
const numbers = useNumbers();
</script>

<template>
  <div>
    <button type="button" @click="numbers.push(numbers.length + 1)">
      Add Numbers
    </button>
    <ul>
      <li v-for="number in numbers">{{ number }}</li>
    </ul>
  </div>
</template>

定義ファイルの作成

Nuxt2 では nuxt.config.js の1ファイルに記述していましたが、Nuxt3 では nuxt.config.ts と app.config.ts の2ファイルを使い分けることが可能です。

nuxt.config.ts

インストール時から存在するファイルで、defineNuxtConfig に環境変数等の情報を記述可能です。
サーバー側のみで使用する値とサーバー側およびクライアント側で使用する値のどちらも定義することができます。
記述を変更するとサービスが再起動するため、変更の反映には時間が掛かります。

app.config.ts

インストール時には存在しないので使用する場合は新規作成する必要があります。
defineAppConfig にクライアント側に公開してもよいパブリックな情報を記述可能です。
ホットリロード（HMR）に対応しているため、記述を変更すると即反映されます。

おわりに

Nuxt3 のインストールおよび基本機能の確認を行ってみました。
便利な機能がたくさん増えていますが、Nuxt2 と記述方法が違うところも多いので、使いこなせるまでには時間が掛かりそうです。