【Nuxt.js 入門】ゼロからプロジェクトを作成するまでの手順まとめ

どうも、こうすけ（@kosuke_upd）です。

今回は、Nuxt.js 入門として、Nuxt.js とは何か、ゼロからプロジェクトを作成するまでの手順、各ディレクトリの役割、デプロイしてアプリケーションを公開する方法などについて解説します。

これから Nuxt.js を触っていく人に向けて、Nuxt.js とはどんなものか、まずはじめに何をすれば良いのかということをお伝えしていきます。では早速順番に見ていきましょう。

Nuxt.js とは

Nuxt.js とは、Vue.js アプリケーションを作成するためのフレームワークであり、Vue.js 開発者がより早く簡単に開発を行えるようにすることを目的に作られたフレームワークです。

Nuxt.js では、ユニバーサルアプリケーション (様々なデバイスに対応するアプリケーション)、静的アプリケーション、SPA (シングルページアプリケーション) の中から状況に応じて作りたいアプリケーションの種類を選択することができます。

主な機能として、SSR (サーバーサイドレンダリング)、静的ファイル配信、メタタグの管理、コードの自動分割、ルーティングの自動生成などの機能が備わっています。

詳細は公式ドキュメントを見たほうが早いので、気になる場合はこちらのページをご覧ください。

Nuxt.js でプロジェクトを作成

では実際に Nuxt.js を用いてプロジェクトを作成していきましょう。

準備: npx または yarn のインストール

Nuxt.js をインストールするには、npx または yarn が必要なので、もしこれらをインストールしていない場合は先にインストールしておきましょう。

下記コマンドにより、npx や yarn がインストールされているか確認できます。バージョン確認用コマンドなので、バージョンが表示されたらインストールされているということです。

npx の場合

$ npx -v

yarn の場合

$ yarn -v

もしインストールされていない場合は、下記ページを参考にインストールしておきましょう。

npx のインストールについて

npx は npm 5.2.0 からデフォルトでバンドルされているため、最新の npm をインストールすることで npx を自動的にインストールできます。

下記ボタンの遷移先ページでも npm のインストール方法が書かれていますが、結果的に npx もインストールしていることとなるためご安心ください。

手順1. Nuxt.js をインストールしプロジェクトを作成

では、Nuxt.js をインストールし、プロジェクトを作成しましょう。下記コマンドを実行します。
※プロジェクト名の箇所は必要に応じて変更してください。

npx の場合

$ npx create-nuxt-app nuxt-project-sample

yarn の場合

$ yarn create nuxt-app nuxt-project-sample

するといくつか質問されます。順番に見ていきましょう。

質問1

? Project name (nuxt-project-sample)

プロジェクトの名前を入力します。必要に応じて変更しましょう。

質問2

? Project description (My posh Nuxt.js project)

プロジェクトの説明文を入力します。必要に応じて変更しましょう。

質問3

? Use a custom server framework
❯ none 
  express 
  koa 
  adonis 
  hapi 
  feathers 
  micro 
  fastify

サーバーサイドのフレームワークを選択します。「none」を選択すると、Nuxt.js のデフォルトサーバーになります。

質問4

? Choose features to install
❯◯ Progressive Web App (PWA) Support
 ◯ Linter / Formatter
 ◯ Prettier
 ◯ Axios

プロジェクトにインストールしたい機能を選択します。複数選択が可能です。

質問5

? Use a custom UI framework 
❯ none 
  bootstrap 
  vuetify 
  bulma 
  tailwind 
  element-ui 
  buefy
  ant-design-vue 
  iview 
  tachyons

使用したい UI フレームワークを選択します。

質問6

? Use a custom test framework
❯ none 
  jest 
  ava

使用したいテスティングフレームワークを選択します。

質問7

? Choose rendering mode
❯ Universal 
  Single Page App

Nuxt.js のレンダリングモードを選択します。

質問8

? Author name

作者名を入力します。必要に応じて変更しましょう。

質問9

? Choose a package manager
❯ npm 
  yarn

パッケージマネージャを選択します。

すべての質問に答えると、プロジェクトディレクトリが作られ、その中に様々なファイルが生成されます。Nuxt.js のインストールとプロジェクトの作成は完了です。

手順2. プロジェクトを起動する

では、プロジェクトを起動し、雛形ページをブラウザで確認してみましょう。

まずは下記コマンドを実行することでプロジェクトが起動しましょう。インストールしたパッケージマネージャによって若干コマンドが異なります。
※プロジェクトディレクトリ名の部分は必要に応じて変更してください。

npm の場合

$ cd nuxt-project-sample
$ npm run dev

yarn の場合

$ cd nuxt-project-sample
$ yarn dev

そして、ブラウザで http://localhost:3000 にアクセスし雛形ページを確認してみましょう。

下画像のような雛形ページが表示されたらプロジェクトの基盤の作成は完了です。あとは好きなように開発していきましょう。

Nuxt.js のディレクトリ構成

次は、Nuxt.js で作成したプロジェクトのディレクトリ構成について説明します。全体のディレクトリ構成は下記のようになっていると思います。
※Nuxt.js インストール時の質問への回答によって若干異なることがあります。

ディレクトリ構成

./nuxt-project-sample
├── .editorconfig
├── .git
├── .gitignore
├── .nuxt
├── README.md
├── assets
├── components
├── layouts
├── middleware
├── node_modules
├── nuxt.config.js
├── package-lock.json
├── package.json
├── pages
├── plugins
├── static
└── store

各主要ディレクトリについて説明します。

assets ディレクトリ

assets ディレクトリでは、 Stylus, Sass, LESS, Image, Font などのコンパイルされていないファイルを管理します。

このディレクトリは必須ではないため、もし不要であれば削除しても構いません。

assets ディレクトリの詳細はこちら

components ディレクトリ

components ディレクトリでは、Vue.js コンポーネントを管理します。このコンポーネントでは、asyncData や fetch を使用することはできません。

このディレクトリは必須ではないため、もし不要であれば削除しても構いません。

layouts ディレクトリ

layouts ディレクトリでは、アプリケーションのレイアウト用ファイルを管理します。サイドバーを含めるかどうか、モバイルとデスクトップで異なるレイアウトを使用するかどうかといった操作を行います。

このディレクトリは必須ではないため、もし不要であれば削除しても構いません。

layouts ディレクトリの詳細はこちら

middleware ディレクトリ

middleware ディレクトリでは、アプリケーションのミドルウェアを管理します。ページやレイアウトをレンダリングする前に実行したいカスタム関数を定義します。

このディレクトリは必須ではないため、もし不要であれば削除しても構いません。

middleware ディレクトリの詳細はこちら

pages ディレクトリ

pages ディレクトリでは、アプリケーションのビューファイル、ルーティングファイルを管理します。Nuxt.js では、このディレクトリ内のすべての *.vue ファイルを読み込み、自動的にアプリケーションのルーターを生成します。

pages ディレクトリの詳細はこちら

plugins ディレクトリ

plugins ディレクトリでは、ルートの Vue.js アプリケーションをインスタンス化する前に実行したい JavaScript プラグインを管理します。自前のライブラリや外部モジュールを使用する際には、このディレクトリ内のファイルで操作します。

このディレクトリは必須ではないため、もし不要であれば削除しても構いません。

plugins ディレクトリの詳細はこちら

static ディレクトリ

static ディレクトリでは、直接サーバーのルートに配置され、変更される可能性の低いファイルを管理します。例えば favicon.ico や robots.txt などが該当します。

このディレクトリは必須ではないため、もし不要であれば削除しても構いません。

static ディレクトリの詳細はこちら

store ディレクトリ

store ディレクトリでは、状態管理をしてくれる Vuex ストアのファイルを管理します。Nuxt.js では、デフォルトでは Vuex ストアは無効になっていますが、このディレクトリに index.js ファイルを作成することで有効になります。

このディレクトリは必須ではないため、もし不要であれば削除しても構いません。

store ディレクトリの詳細はこちら

nuxt.config.js ファイル

nuxt.config.js ファイルでは、Nuxt.js のカスタム設定を行います。

nuxt.config.js の詳細はこちら

基本的な4つのコマンド

次は、Nuxt.js による開発で使用する基本的な4つのコマンドを紹介します。

コマンド1. nuxt

nuxt コマンドを実行すると、開発サーバーを localhost:3000 で起動します。このサーバーはホットリローディングするため、開発中に変更を保存するだけで自動的に画面が再描画されます。

このコマンドを使用する場合は、ターミナルで下記のように入力して実行します。

npm の場合

$ npm run dev

yarn の場合

$ yarn dev

コマンド2. nuxt build

nuxt build コマンドを実行すると、アプリケーションを Webpack でビルドし、JS と CSS をプロダクション向けにミニファイします。

このコマンドを使用する場合は、ターミナルで下記のように入力して実行します。

npm の場合

$ npm run build

yarn の場合

$ yarn build

コマンド3. nuxt start

nuxt start コマンドを実行すると、プロダクションモードでサーバーを起動します。nuxt start コマンドは、nuxt build コマンド実行後に実行する必要があります。

コマンド実行後にブラウザで localhost:3000 にアクセスすることで、プロダクションモードのアプリケーションを見ることができます。

このコマンドを使用する場合は、ターミナルで下記のように入力して実行します。

npm の場合

$ npm run start

yarn の場合

$ yarn start

コマンド4. nuxt generate

nuxt generate コマンドを実行すると、アプリケーションをビルドされ、ルートごとに HTML ファイルが生成されます。このコマンドは静的ファイルのホスティングに使用します。

このコマンドを実行すると、プロジェクトディレクトリ直下に dist フォルダが生成されるので、このフォルダをホスティングサービスにデプロイするなどして使用します。

このコマンドを使用する場合は、ターミナルで下記のように入力して実行します。

npm の場合

$ npm run generate

yarn の場合

$ yarn generate

アプリケーションをデプロイして公開

最後に、作成したアプリケーションをデプロイして公開する方法を紹介します。

GitHub Pages にデプロイする場合はこちらを参考にしてみてください。

Nuxt.js プロジェクトを GitHub Pages にデプロイする超簡単な方法

Heroku にデプロイする場合はこちらを参考にしてみてください。

Nuxt.js プロジェクトを Heroku にデプロイして公開する方法

Netlify にデプロイする場合はこちらを参考にしてみてください。

Nuxt.js プロジェクトを Netlify にデプロイして公開する方法

Firebase Hosting にデプロイする場合はこちらを参考にしてみてください。

Nuxt.js プロジェクトを Firebase Hosting にデプロイして公開する方法

最後に

今回は、Nuxt.js 入門として、Nuxt.js とは何か、Nuxt.js によるプロジェクトの作成方法、Nuxt.js で生成したプロジェクトのディレクトリ構成やコマンドなどについて解説しました。

Nuxt.js を使用することで、簡単に素早くアプリケーションを開発できるので、ぜひ使ってみてください。