ディレクトリ構成一覧
構成要素 | 説明 |
---|---|
.nuxt | コマンドでのビルド結果はここに配置されます。 |
└router.js | pagesディレクトリ配下のファイルに対して、ルーティングの設定を行います。 |
store | Vuexのストアファイルを配置します。Nuxt.jsではデフォルトでVuexを読み込んでいます。 |
static | コンパイルしない静的なファイルを配置します。例:robots.txt等。「/(ルート)」でアクセスすることができます。 |
plugins | アプリケーションをインスタンス化する前に実行したいJavaScriptプラグインを配置します。 |
pages | Nuxt.jsにおいて一番重要なディレクトリになります。「ビュー」と「ルーティング」に関する役割を担います。「index.vue」に最初に表示させるページのHTMLを記述する。 |
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のデフォルト設定を上書きすることができるファイルのことです。
構文
下記のようにオプションを指定するようです。
1 2 3 |
export default { オプション: 値 } |
オプション
loading
画面遷移時のローディングコンポーネントを上書きできます。
例
export default {
oading: '~/components/loading.vue'
}
Nuxt.js公式サイトより
css
どのファイルにも共通のcssをインクルードさせることができます。
router
Nuxt.jsのデフォルトのvue-router設定を上書きすることができます。
generate
ユニバーサルアプリから、静的なHTMLにルーティングさせたい場合に使います。
routes
静的な値を返せます。(関数を使えば、動的なURLも返すことは可能です。)
pluginディレクトリ
pluginsディレクトリに配置します。
pluginsディレクトリに配置したJavaScriptファイルは、インスタンス化する前に読み込まれるため、特に具体的に外部読み込みをしなくても、各ページを使う際に、プラグインとして使うことができます。
実装例
プラグイン名.js
1 2 3 |
import Vue from 'vue'; import 'プラグイン名' from 'プラグイン名'; Vue.use('プラグイン名'); |
middrewareディレクトリ
middleware/ファイル名.jsとして配置されたファイルは、ページをレンダリングするよりも前に実行される関数を定義して配置することができます。
middlewareを読み込む構文
1 2 3 4 |
<script> export default{ middleware: ["読み込むファイル名"]};(middleware/ファイル名.jsを読み込む。) </script> |
middlewareの特徴
関数は、「コンテキストオブジェクト」となる。
ミドルウェアとして定義した関数は、第一引数として「コンテキストオブジェクト」を受け取ります。
コンテキストオブジェクトを利用することで、コンポーネント内のデータを操作することが可能です。
middlewareは、サーバーサイドで実行される。
middlewareで宣言するJavaScriptは、あくまでサーバーサイドで使うことができる関数となります。
「console.log()」等のクライアント・サーバー関係ない関数は問題ないですが、「alert」のようなクライアントで動くような関数は使えないので注意しましょう。
middlewareの利用例
ページをレンダリングする前等に実行されるので、認証処理等に活用するとよいでしょう。
pageディレクトリ
.vueファイルは、一つのページを指しており、これを「ページコンポーネント」と呼びます。
ページコンポーネントについては、詳しくは下記の記事で解説しています。
ルーティング設定(.nuxt/router.js)
ルーティング設定については、詳しくは下記の記事で解説しています。
assets
LESSやSCSS等のコンパイルされていないファイルが配置されます。
Webpackによってビルドされるファイルが配置されます。(WebpackのLoaderの処理を適用することができます。)
Nuxt.jsでは、「file-loader」、「url-loader」を読み込むのでそれが使用されます。
この記事へのコメントはありません。