Zenn
🏗️

Nuxt3の環境構築やってみた

2024/03/14に公開
Nuxt
Vue.js
Vue 3
Nuxt 3
tech

概要

  • Nuxt3の環境構築を解説します。
  • Nuxt3のディレクトリ構成についても紹介しています。
  • いろんな人が記事あげてるけど、記録ということでやってます。

環境

  • MacBook Air M2 2022 24GB（OS: Sonoma 14.4）

前提

  • いずれかの方法で、以下をインストールしておいてください。
    • 要インストール
      • node.js: v20.9.0
      • yarn: 4.0.0
    • おすすめインストール方法

      • 個人的には volta を使用すると良い感じに Node バージョン管理ができるので、おすすめです。

        切替も簡単、package.json 内にバージョンを定義することも可能。

手順

1. Nuxt3 を展開したいディレクトリの準備

# 任意のディレクトリに移動
# もしそういったディレクトリが無い方は、Homeディレクトリ以下に workspace とか作っておくと便利です。
$ cd ~/workspace

# Nuxt3をインストールするディレクトリを用意
$ mkdir nuxt3-sample

# nuxt3-sample ディレクトリに移動
$ cd nuxt3-sample

# 事前に、node が使用できることを確認
# v20.9.0 が返されればOKです。
$ node -v

2. Nuxt3 のインストール

# Nuxt3 のインストール
$ npx nuxi init .

# ここから以下質問を受けますが、一旦以下で回答してください
Need to install the following packages: nuxi@3.xx.x # => y
Which package manager would you like to use? # => yarn
Are you interested in participating? # => No

# 以下の表示が出れば、インストール成功です
✔ Types generated in .nuxt                                                                           7:34:21 PM
✨  Done in 383.70s.
✔ Installation completed.

# yarn コマンドで必要なパッケージをインストールします
$ yarn

# 以下が出れば完了です。
➤ YN0000: └ Completed in 4s 120ms
➤ YN0000: · Done in 7s 743ms

3. Nuxt3 の起動

$ yarn dev

# 以下のような表示が出ればOKです。
Nuxt 3.10.3 with Nitro 2.9.3                                                                          7:42:20 PM
                                                                                                      7:42:20 PM
  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose

  ➜ DevTools: press Shift + Option + D in the browser (v1.0.8)                                        7:42:21 PM

ℹ Vite server warmed up in 544ms                                                                     7:42:22 PM
✔ Nuxt Nitro server built in 457 ms                                                            nitro 7:42:22 PM
ℹ Vite client warmed up in 871ms

[http://localhost:3000/](http://localhost:3000/) で起動しているので、アクセスしてください。

以下が表示されれば完了です。

nuxt_welcome

Nuxt3 ディレクトリ構成について

インストール直後のディレクトリが、 server しか存在せず、驚く人がいるかもしれません（僕は驚きました）。

components や pages などは最初からディレクトリが用意されていると思ったからです。

なので丸っきり仕様がNuxt3 から変わったのか？と疑ってしまいましたが、そういうわけではなさそうです。

https://nuxt.com/docs/guide/directory-structure/

こちらのリンク配下には components , pages , composables といったページが用意されていて、それぞれNuxt3 として推奨しているディレクトリ構造のようです。

同じような構造にすることで、「 components ディレクトリを使えば自動的にimportするよ」みたいな恩恵も受けれるそうです。

そのため、基本的にはNuxt3 の基本構造に倣って、必要なディレクトリを追加する形が良いと思います。

各ディレクトリについて

Nuxt3 のドキュメントは全て英語で、英語全く話せない人間としてはそれぞれ読むにも労力がいるので、それぞれのディレクトリの概要を以下に記載します。

より興味を持ったものに関しては、実際にドキュメントを読んだり検索して調べてみると面白いかもしれません。

（ Claude.ai に生成してもらいました）

  • assets
    • 静的ファイル(画像、スタイルシート、フォントなど)を格納するディレクトリです。
    • ビルド時にこれらのファイルが処理され、アプリケーションで使用可能になります。
  • components
    • Vue.jsのコンポーネントファイルを格納するディレクトリです。
    • components/直下に置かれたコンポーネントは自動的に読み込まれ、グローバルで利用可能になります。
  • composables
    • コンポーザブル関数(composable functions)を格納するディレクトリです。
    • コンポーザブル関数は、ロジックを再利用可能な形で抽象化するものです。
    • useSomethingのような命名規則に従う必要があります。
  • content
    • Nuxt Content機能で使用するマークダウンファイルやその他のコンテンツファイルを格納するディレクトリです。
    • content/直下のファイルは自動的にNuxt Contentによって解析され、コンテンツとしてアクセス可能になります。
  • layouts
    • アプリケーションのレイアウト(ヘッダー、フッター、サイドバーなど)を定義するVueコンポーネントを格納するディレクトリです。
    • layouts/直下のレイアウトコンポーネントは、ページコンポーネントで自動的に適用されます。
  • middleware
    • ルートの認証やリダイレクトなどの処理を行うミドルウェアを格納するディレクトリです。
    • middleware/ ディレクトリ内のファイルは自動的に読み込まれ、ルーティングで参照可能になります。
  • pages
    • アプリケーションのページコンポーネントを格納するディレクトリです。
    • このディレクトリ内のファイル構造がそのままルーティングに反映されます。
  • plugins
    • Vue.jsプラグインや第三者ライブラリを登録するファイルを格納するディレクトリです。
    • plugins/内のファイルは自動的に読み込まれ、アプリケーションでインポート可能になります。
  • public
    • 静的ファイル(ロボット向け記述ファイルなど)を格納するディレクトリです。
    • この中のファイルは、ビルド時にそのままWeb上に公開されます。
  • server
    • Nuxt3のサーバー側のコードを格納するディレクトリです。
    • APIルートやミドルウェアなどのサーバーサイドロジックがここに含まれます。
  • stores
    • Pinia 状態管理ストアを格納するディレクトリです。
    • stores/内のファイルは自動的に読み込まれ、アプリケーション内で利用可能になります。
  • utils
    • 一般的なユーティリティ関数を格納するディレクトリです。
    • このディレクトリ内の関数は手動でインポートする必要があります。
GitHubで編集を提案

Discussion