はじめに

Nuxt2に比べNuxt3の情報がまだ不足していると感じたので、Nuxt初心者の自分が辿った足跡を残そうと思い投稿しました。

ゴール

Nuxt3のWebアプリで、ブラウザにHello Worldと表示する。

開発環境

MacOS 13.4.1 (Ventura)
VS Code 1.84.2
homebrew 4.1.17
nodebrew 1.2.0
node 18.18.2
vue 3.3.8
nuxt 3.8.2

目次

事前準備
Nuxtプロジェクト新規作成
プロジェクトの起動
Hello Worldする
複数ページの自動ルーティング
参考文献

事前準備（環境OKな人はスキップしてください！）

homebrewのインストール

下記コマンドをターミナルで実行。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

pnpmのインストール

Homebrewから下記コマンドでインストール。

brew install pnpm

pnpmはnpmに比べて最大2倍高速でデメリットも少ないので、新しくプロジェクトを作る場合はぜひ採用してみたい。

nodeのインストール

以下の記事を参考にインストール。

Nuxt3プロジェクトの新規作成

好きなディレクトリに移動し、以下のコマンドを入力。
Nuxt2のcreate-nuxt-appに比べて、質問数がかなり少ない。

# hogehogeは任意のプロジェクト名
# Nuxt2の時のnpx create-nuxt-appと同じコマンド
npx nuxi init hogehoge

# nuxiをインストールするよう指示があるので、`y`でインストール
Need to install the following packages:
nuxi@3.10.0
Ok to proceed? (y) y

# パッケージマネージャーを聞かれるので、pnpmを指定。
❯ Which package manager would you like to use?
○ npm
● pnpm
○ yarn
○ bun

# Gitレポジトリの初期化をしたい場合はYesを選択
# .gitディレクトリが生成される
❯ Initialize git repository?
● Yes / ○ No

プロジェクトの起動

プロジェクトディレクトリへ移動し、初期アプリを起動する。

# プロジェクトディレクトリへ移動
cd hogehoge

# Nuxt3アプリの起動
pnpm run dev

# 以下のようのコンソールが表示されたら起動完了
> nuxt dev

Nuxt 3.8.2 with Nitro 2.8.0                                        12:38:17 PM
                                                                   12:38:17 PM
  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose

  ➜ DevTools: press Shift + Option + D in the browser (v1.0.3)     12:38:18 PM

ℹ Vite server warmed up in 680ms                                  12:38:19 PM
ℹ Vite client warmed up in 869ms                                  12:38:19 PM
✔ Nitro built in 266 ms                                     nitro 12:38:19 PM

ブラウザで http://localhost:3000/ を開いて無事にアプリが起動していることを確認する。

Hello Worldする

プロジェクトをVS Codeで開く。

code .

pagesディレクトリをルートディレクトリに新規作成し、その中にindex.vueを作成。

作成したindex.vueに以下の内容を追記。

<template>
    <div>
        <h1>Hello World!</h1>
    </div>
</template>

このままだと、先ほどのWelcomeページが表示されてしまうので、ルートディレクトリのapp.vueの中身を以下のように書き換える。
NuxtPage /は、/pages配下のvueファイルを自動ルーティングできるようにするコンポーネント。
※NuxtPage 公式ドキュメント

<template>
  <div>
  <!-- NuxtWelcomeからNuxtPageに変更 -->
    <NuxtPage />
  </div>
</template>

以下のように http://localhost:3000/ で表示されればHello World成功！
お疲れ様でした。🍵

複数ページの自動ルーティング

Nuxtは/pages配下にvueファイルを追加するだけで自動ルーティングが行われる。
なので、以下のようなディレクトリ構成にした場合、コメントのURLパスでファイルが表示されることになる。

pages
|   # /
├── index.vue
|   # /about
├── about.vue
└── lesson
    |   # /lesson/
    └── index.vue
    |   # /lesson/english
    └── english.vue

※index.vueがディレクトリごとに作成できるのが個人的に...
　対応策はなさそう？→How to avoid index.vue in each folder and still have router generated ?

参考文献