Nuxt3でHelloWorld

はじめに

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

目次

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

事前準備（環境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 ?

参考文献