Nuxtを始めよう

イントロダクション

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"
```

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

依存関係のインストール
プロジェクトディレクトリに移動し、依存関係をインストールします。

bash

cd nuxt-app

bash

  pnpm install

開発サーバの起動
最後に、以下のコマンドで開発サーバを起動します。

bash

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

まとめ
この記事では、Nuxt を使って新しいプロジェクトを始める基本的な手順を紹介しました。これらのステップに従って、Nuxtベースのプロジェクトを簡単に開始できます。

Nuxtのプロジェクト構造を理解する

Nuxtプロジェクトと通常のVueプロジェクトは、以下のように異なる構造を持っています。

Nuxtプロジェクト構造bash

├── 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で作成したスタータープロジェクトの違いを確認することができます。

Vueプロジェクト構造bash


├── 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プロジェクトとほぼ同じ以下のディレクトリを配置して、アプリを構築・成長させることができます。

Nuxtプロジェクトディレクトリbash

├── 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の動作をカスタマイズすることができます。

nuxt.config.tsts

export default defineNuxtConfig({
})

`server`ディレクトリ

/server/ディレクトリは、APIエンドポイントやサーバーミドルウェアなど、Nuxtアプリのサーバーサイドロジックを作成するために使用されます。ここに含まれるファイルは、Nuxtによって自動的にロードされ、プロジェクトのAPIエンドポイントを作成します。ただし、外部かつリモートのAPIを使用する場合は、このディレクトリを気にする必要はありません。このディレクトリについて詳しく知りたい方は、https://nuxt.com/docs/guide/directory-structure/serverをご覧ください。

`.gitignore` ファイル

.gitignoreファイルには、Gitリポジトリに含めないファイルやディレクトリを指定します。このファイルで git が無視するファイルやフォルダのデフォルトの一覧は次のとおりです。

.gitignorebash

# 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を選択する説得力のある理由があります。