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. [事前準備](#Chapter1)
1. [Nuxtプロジェクト新規作成](#Chapter2)
1. [プロジェクトの起動](#Chapter3)
1. [Hello Worldする](#Chapter4)
1. [複数ページの自動ルーティング](#Chapter5)
1. [参考文献](#reference)

<!-- 各チャプター -->
<a id="#Chapter1"></a>
# 事前準備（環境OKな人はスキップしてください！）
### homebrewのインストール
下記コマンドをターミナルで実行。
```zsh
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
```


### pnpmのインストール
Homebrewから下記コマンドでインストール。
```zsh
brew install pnpm
```
pnpmはnpmに比べて最大2倍高速でデメリットも少ないので、新しくプロジェクトを作る場合はぜひ採用してみたい。

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

https://zenn.dev/shichi18/articles/20230325-01-50eb75b9096004

<a id="#Chapter2"></a>
# Nuxt3プロジェクトの新規作成

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

<a id="#Chapter3"></a>
# プロジェクトの起動
プロジェクトディレクトリへ移動し、初期アプリを起動する。
```zsh
# プロジェクトディレクトリへ移動
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/ を開いて無事にアプリが起動していることを確認する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1841759/b797dfc9-7787-2ad7-f821-5c315c044598.png)


<a id="#Chapter4"></a>
# Hello Worldする
プロジェクトをVS Codeで開く。
```zsh
code .
```
pagesディレクトリをルートディレクトリに新規作成し、その中にindex.vueを作成。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1841759/ce37f668-0ae8-c996-6dd8-0a47634d34ca.png)

作成したindex.vueに以下の内容を追記。
```vue
<template>
    <div>
        <h1>Hello World!</h1>
    </div>
</template>
```

このままだと、先ほどのWelcomeページが表示されてしまうので、ルートディレクトリのapp.vueの中身を以下のように書き換える。
`NuxtPage /`は、`/pages`配下のvueファイルを自動ルーティングできるようにするコンポーネント。
※[NuxtPage 公式ドキュメント](https://nuxt.com/docs/api/components/nuxt-page)
```vue
<template>
  <div>
  <!-- NuxtWelcomeからNuxtPageに変更 -->
    <NuxtPage />
  </div>
</template>
```
以下のように http://localhost:3000/ で表示されればHello World成功！
お疲れ様でした。🍵
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1841759/67a6e6c0-f127-4d6c-ce2a-5fa676a29f70.png)



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

```zsh
pages
|   # /
├── index.vue
|   # /about
├── about.vue
└── lesson
    |   # /lesson/
    └── index.vue
    |   # /lesson/english
    └── english.vue
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1841759/4d3a79a4-682f-0bb5-1fb8-0c55e6963092.png)

※index.vueがディレクトリごとに作成できるのが個人的に...
　対応策はなさそう？→[How to avoid index.vue in each folder and still have router generated ?](https://github.com/nuxt/nuxt/issues/2708)

 
<a id="#reference"></a>
# 参考文献
https://nuxt.com/docs/guide/directory-structure/app

https://qiita.com/zaburo/items/29fe23c1ceb6056109fd

https://zenn.dev/yuhua_shi/articles/243d66f505a120

https://github.com/nuxt/nuxt/issues/2708