イントロダクション
Nuxtは、ユニバーサル（SSR）アプリ、シングルページアプリ（SPA）、静的生成アプリ（SSG）として開発・デプロイ可能なVueアプリを作成するための上位のNode.jsウェブ開発フレームワークです。パフォーマンスと生産性に優れたフルスタックのウェブアプリやウェブサイトを安心して作成できます。
Nuxt を使ってアプリを作成する前に、Nuxtプロジェクトのインストール方法とNuxtのディレクトリ構造を理解する必要があります。Nuxtオフィシャルサイトで詳細を確認できます。
Nuxtプロジェクトの作成
- Node.js のバージョンを互換性のあるバージョン（^18.0.0）にアップグレードしてください。
Node.jsの管理方法は環境や好みに応じて異なります。
以下のコマンドでNode.jsのインストールされたバージョンを確認します。
```bash
node -v # 出力例: v18.18.2"
```
2. Nuxtプロジェクトの初期化
Nuxtプロジェクトを作成するには、以下のコマンドを実行します(作成するアプリ名を`nuxt-app`としています)。
```bash
nuxi@latest init nuxt-app"
```
このコマンドは、Nuxtアプリケーションのボイラープレートを作成し、次の手順を指示します。
```bash[インストールプロセスの一例]
✔ Which package manager would you like to use?
○ npm
● pnpm ← お好みのものを選択してください
○ yarn
○ bun
◐ Installing dependencies...
Packages: +675
+++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 740, reused 675, downloaded 0, added 675, done
node_modules/.pnpm/esbuild@0.19.9/node_modules/esbuild:
Running postinstall script, done in 379ms
> nuxt-app@ postinstall /<install directory>/nuxt-app
> nuxt prepare
✔ Types generated in .nuxt
devDependencies:
+ @nuxt/devtools 1.0.6
+ nuxt 3.8.2
+ vue 3.3.12
+ vue-router 4.2.5
Done in 1m 10.5s
✔ Installation completed.
✔ Initialize git repository?
● Yes / ○ No ←これもお好みで
ℹ Initializing git repository...
Initialized empty Git repository in /<install directory>/nuxt-app/.git/
✨ Nuxt project has been created with the v3 template. Next steps:
› cd nuxt-app
› Start development server with pnpm run dev
```
3. 依存関係のインストール
プロジェクトディレクトリに移動し、依存関係をインストールします。
cd nuxt-app
pnpm install
- 開発サーバの起動
最後に、以下のコマンドで開発サーバを起動します。
pnpm dev
```
これにより、以下のような出力が表示され、ブラウザで **http://localhost:3000** にアクセスすることで、作成したNuxtアプリケーションを見ることができます。
```bash
> nuxt-app@ dev /<install directory>/nuxt-app
> nuxt dev
Nuxt 3.8.2 with Nitro 2.8.1
➜ Local: http://localhost:3000/
➜ Network: use --host to expose
➜ DevTools: press Shift + Option + D in the browser (v1.0.6)
ℹ Vite server warmed up in 2838ms
ℹ Vite client warmed up in 3357ms
✔ Nitro built in 1180 ms
```
5. まとめ
この記事では、Nuxt を使って新しいプロジェクトを始める基本的な手順を紹介しました。これらのステップに従って、Nuxtベースのプロジェクトを簡単に開始できます。
## Nuxtのプロジェクト構造を理解する
Nuxtプロジェクトと通常のVueプロジェクトは、以下のように異なる構造を持っています。
```bash[Nuxtプロジェクト構造]
├── package.json
├── tsconfig.json
├── nuxt.config.ts
├── app.vue
├── README.md
├── public
│ └── favicon.ico
├── server
│ └── tsconfig.json
└── node_modules
└── ...
Nuxtプロジェクトには /src/ ディレクトリがないことがおわかりいただけると思います。Vite(Vue)プロジェクトの /src/ ディレクトリにあるものはすべてNuxtプロジェクトのルートディレクトリに移動されます。Nuxi CLIとViteで作成したスタータープロジェクトの違いを確認することができます。
├── package.json
├── vite.config.js
├── index.html
├── node_modules
│ └── ...
├── public
│ └── favicon.ico
└── src
├── App.vue
├── main.js
├── components
│ └── HelloWorld.vue
└── assets
└── logo.png
つまり、Nuxi CLIでは /src/ ディレクトリが省略されているのです。しかし、Viteプロジェクトと同じように、Nuxtプロジェクトでの基本構造から、プロジェクトのルートディレクトリに、Viteプロジェクトとほぼ同じ以下のディレクトリを配置して、アプリを構築・成長させることができます。
├── components
├── composables
├── assets
├── public
├── layouts
├── pages
├── plugins
├── store
├── server
├── middleware
└── modules
Nuxtプロジェクトでは、/routes/ ディレクトリと router.js ファイルが不要になったことに注意してください。Nuxt は自動的に Vue Router を統合し、 /pages/ ディレクトリに作成した .vue ファイルを基に、アプリのすべてのルートを生成します。つまり、プロジェクトの依存関係として package.json ファイルに手動で Vue Router をインストールする必要がないことも意味します。この作業はNuxtが自動的に行ってくれます。
nuxt.config.ts ファイル
Nuxtの設定は、nuxt.config.tsファイルで行われます。このファイルでは、Nuxtの動作をカスタマイズすることができます。
export default defineNuxtConfig({
})
serverディレクトリ
/server/ディレクトリは、APIエンドポイントやサーバーミドルウェアなど、Nuxtアプリのサーバーサイドロジックを作成するために使用されます。ここに含まれるファイルは、Nuxtによって自動的にロードされ、プロジェクトのAPIエンドポイントを作成します。ただし、外部かつリモートのAPIを使用する場合は、このディレクトリを気にする必要はありません。このディレクトリについて詳しく知りたい方は、https://nuxt.com/docs/guide/directory-structure/serverをご覧ください。
.gitignore ファイル
.gitignoreファイルには、Gitリポジトリに含めないファイルやディレクトリを指定します。このファイルで git が無視するファイルやフォルダのデフォルトの一覧は次のとおりです。
# Nuxt dev/build outputs
.output
.data
.nuxt
.nitro
.cache
dist
# Node dependencies
node_modules
# Logs
logs
*.log
# Misc
.DS_Store
.fleet
.idea
# Local env files
.env
.env.*
!.env.example
.nuxt と .output ディレクトリ
.nuxtディレクトリは、開発モードでVueアプリを生成するために使用されます。.outputディレクトリは、ビルド時に生成されるファイルを含みます。
まとめ
この記事では、Nuxt を使ったプロジェクトの開始方法と基本的なプロジェクト構造について解説しました。これらの基本を理解することで、Nuxtを使用した開発がよりスムーズになります。
SSRやSSGのVueアプリを作成する場合、Nuxtは素晴らしい選択肢です。SPAモードを選んでも、Nuxtのフルパワーはユニバーサルモードまたはサーバーサイドレンダリング(SSR)にあります。しかし、クライアントサイドのみで実行されるSPAを開発したい場合は、バニラVueの使用を検討するのが良いでしょう。SEOの懸念がある場合は、Nuxtを選択する説得力のある理由があります。