【Nuxt.js】ディレクトリ構成（nuxt.config.js、middreware、plugin、page、ルーティングなど）

ディレクトリ構成一覧

構成要素	説明
.nuxt	コマンドでのビルド結果はここに配置されます。
└router.js	pagesディレクトリ配下のファイルに対して、ルーティングの設定を行います。
store	Vuexのストアファイルを配置します。Nuxt.jsではデフォルトでVuexを読み込んでいます。
static	コンパイルしない静的なファイルを配置します。例：robots.txt等。「/（ルート）」でアクセスすることができます。
plugins	アプリケーションをインスタンス化する前に実行したいJavaScriptプラグインを配置します。
pages	Nuxt.jsにおいて一番重要なディレクトリになります。「ビュー」と「ルーティング」に関する役割を担います。「index.vue」に最初に表示させるページのＨＴＭＬを記述する。
package.json	Nuxt.jsで使用するコマンド等を定義します。
nuxt.config.js	「コンテキストオブジェクト」への各種設定を行います。
middleware	ページをレンダリングする前に実行される関数を定義して配置することができます。
layouts	アプリケーションのレイアウトファイルを入れます。
└default.vue	デフォルトのレイアウトファイルになります。
└error.vue	エラーページのレイアウトファイルになります。
components	ビューで使用するためのコンポーネントを指定します。Nuxt.jsの影響下のファイルではなく、Nuxt.jsからは自動で読み込まれないので、ピュアなvueファイルになります。使用しないのであれば削除することが可能です。
assets	LESSやSCSS等のコンパイルされていないファイルを配置します。
README.md
yarn.lock
node_modules

「nuxt.config.js」とは？

Nuxt.jsのデフォルト設定を上書きすることができるファイルのことです。

構文

下記のようにオプションを指定するようです。

export default {
  オプション: 値
}

export default {

オプション: 値

}

オプション

loading

画面遷移時のローディングコンポーネントを上書きできます。

例

export default {

oading: '~/components/loading.vue'

}

Nuxt.js公式サイトより

css

どのファイルにも共通のcssをインクルードさせることができます。

router

Nuxt.jsのデフォルトのvue-router設定を上書きすることができます。

generate

ユニバーサルアプリから、静的なHTMLにルーティングさせたい場合に使います。

routes

静的な値を返せます。（関数を使えば、動的なＵＲＬも返すことは可能です。）

pluginディレクトリ

pluginsディレクトリに配置します。

pluginsディレクトリに配置したJavaScriptファイルは、インスタンス化する前に読み込まれるため、特に具体的に外部読み込みをしなくても、各ページを使う際に、プラグインとして使うことができます。

実装例

プラグイン名.js

import Vue from 'vue';
import 'プラグイン名' from 'プラグイン名';
Vue.use('プラグイン名');

import Vue from 'vue';

import 'プラグイン名' from 'プラグイン名';

Vue.use('プラグイン名');

middrewareディレクトリ

middleware/ファイル名.jsとして配置されたファイルは、ページをレンダリングするよりも前に実行される関数を定義して配置することができます。

middlewareを読み込む構文

<script>
export default{
middleware: ["読み込むファイル名"]};(middleware/ファイル名.jsを読み込む。）
</script>

export default{

middleware: ["読み込むファイル名"]};(middleware/ファイル名.jsを読み込む。）

</script>

middlewareの特徴

関数は、「コンテキストオブジェクト」となる。

ミドルウェアとして定義した関数は、第一引数として「コンテキストオブジェクト」を受け取ります。

コンテキストオブジェクトを利用することで、コンポーネント内のデータを操作することが可能です。

middlewareは、サーバーサイドで実行される。

middlewareで宣言するJavaScriptは、あくまでサーバーサイドで使うことができる関数となります。

「console.log（）」等のクライアント・サーバー関係ない関数は問題ないですが、「alert」のようなクライアントで動くような関数は使えないので注意しましょう。

middlewareの利用例

ページをレンダリングする前等に実行されるので、認証処理等に活用するとよいでしょう。

pageディレクトリ

.vueファイルは、一つのページを指しており、これを「ページコンポーネント」と呼びます。

ページコンポーネントについては、詳しくは下記の記事で解説しています。

【Nuxt.js】「ページコンポーネント」（asyncData、fetch、コンテキスト、layout）

ルーティング設定（.nuxt/router.js）

ルーティング設定については、詳しくは下記の記事で解説しています。

【Nuxt.js】作成したページの「ルーティング」をさせてみる。

assets

LESSやSCSS等のコンパイルされていないファイルが配置されます。

Webpackによってビルドされるファイルが配置されます。（WebpackのLoaderの処理を適用することができます。）

Nuxt.jsでは、「file-loader」、「url-loader」を読み込むのでそれが使用されます。