どうも、こうすけ(@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.jsNuxt.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 などのコンパイルされていないファイルを管理します。
このディレクトリは必須ではないため、もし不要であれば削除しても構いません。
components
ディレクトリ
components
ディレクトリでは、Vue.js コンポーネントを管理します。このコンポーネントでは、asyncData
や fetch
を使用することはできません。
このディレクトリは必須ではないため、もし不要であれば削除しても構いません。
layouts
ディレクトリ
layouts
ディレクトリでは、アプリケーションのレイアウト用ファイルを管理します。サイドバーを含めるかどうか、モバイルとデスクトップで異なるレイアウトを使用するかどうかといった操作を行います。
このディレクトリは必須ではないため、もし不要であれば削除しても構いません。
middleware
ディレクトリ
middleware
ディレクトリでは、アプリケーションのミドルウェアを管理します。ページやレイアウトをレンダリングする前に実行したいカスタム関数を定義します。
このディレクトリは必須ではないため、もし不要であれば削除しても構いません。
pages
ディレクトリ
pages
ディレクトリでは、アプリケーションのビューファイル、ルーティングファイルを管理します。Nuxt.js では、このディレクトリ内のすべての *.vue
ファイルを読み込み、自動的にアプリケーションのルーターを生成します。
plugins
ディレクトリ
plugins
ディレクトリでは、ルートの Vue.js アプリケーションをインスタンス化する前に実行したい JavaScript プラグインを管理します。自前のライブラリや外部モジュールを使用する際には、このディレクトリ内のファイルで操作します。
このディレクトリは必須ではないため、もし不要であれば削除しても構いません。
static
ディレクトリ
static
ディレクトリでは、直接サーバーのルートに配置され、変更される可能性の低いファイルを管理します。例えば favicon.ico
や robots.txt
などが該当します。
このディレクトリは必須ではないため、もし不要であれば削除しても構いません。
store
ディレクトリ
store
ディレクトリでは、状態管理をしてくれる Vuex ストアのファイルを管理します。Nuxt.js では、デフォルトでは Vuex ストアは無効になっていますが、このディレクトリに index.js
ファイルを作成することで有効になります。
このディレクトリは必須ではないため、もし不要であれば削除しても構いません。
nuxt.config.js
ファイル
nuxt.config.js
ファイルでは、Nuxt.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 にデプロイする場合はこちらを参考にしてみてください。
![](http://images.ctfassets.net/ob80l5t8zct0/26qE6lHOVy333sYqkxlMpK/4f763c531f3d9f5fb7bdcdc35104e001/nuxtjs-deploy-gh-pages-160x160.png)
Nuxt.js プロジェクトを GitHub Pages にデプロイする超簡単な方法
Heroku にデプロイする場合はこちらを参考にしてみてください。
![](http://images.ctfassets.net/ob80l5t8zct0/1LGV7cNj8gHm0v0tjf9XBd/1d9db52aab06057c4985af741a7fb609/nuxtjs-deploy-heroku-160x160.png)
Nuxt.js プロジェクトを Heroku にデプロイして公開する方法
Netlify にデプロイする場合はこちらを参考にしてみてください。
![](http://images.ctfassets.net/ob80l5t8zct0/LICtESED0EIRfHGRQvmPf/bc615c61eecf0246892d30672ea231f2/nuxtjs-deploy-netlify-160x160.png)
Nuxt.js プロジェクトを Netlify にデプロイして公開する方法
Firebase Hosting にデプロイする場合はこちらを参考にしてみてください。
![](http://images.ctfassets.net/ob80l5t8zct0/7KQtSHNHSiFDDX74YG8Sga/91bd004b3471651210f7c70ff54dcda0/nuxtjs-deploy-firebase-hosting-160x160.png)
Nuxt.js プロジェクトを Firebase Hosting にデプロイして公開する方法
最後に
今回は、Nuxt.js 入門として、Nuxt.js とは何か、Nuxt.js によるプロジェクトの作成方法、Nuxt.js で生成したプロジェクトのディレクトリ構成やコマンドなどについて解説しました。
Nuxt.js を使用することで、簡単に素早くアプリケーションを開発できるので、ぜひ使ってみてください。
\ 記事が良かったらシェア! /