ディレクトリ構造

デフォルトの Nuxt.js アプリケーションの構造は、小規模のアプリケーションと大規模のアプリケーションのどちらにも適しています。もちろん、好きなように構成することもできます。

ディレクトリ

assets ディレクトリ

assets ディレクトリには LESS や SASS、JavaScript のようなコンパイルされていないファイルを入れます。

アセットの取り扱いについてより深く理解するには アセットに関するドキュメント を参照してください。

components ディレクトリ

components ディレクトリには Vue.js のコンポーネントファイルを入れます。Nuxt.js は components ディレクトリ内のコンポーネントの data メソッドについては手を加えません(訳注: 一方、Nuxt.js は pages ディレクトリ内のコンポーネントの data メソッドには非同期データを扱えるよう手を加えます)

layouts ディレクトリ

layouts ディレクトリにはアプリケーションのレイアウトファイルを入れます。

このディレクトリ名は変更できません。

レイアウトの取り扱いついてより深く理解するには レイアウトに関するドキュメント を参照してください。

middleware ディレクトリ

middleware ディレクトリにはアプリケーションのミドルウェアを入れます。ミドルウェアを使って、ページやページグループ(レイアウト)をレンダリングするよりも前に実行されるカスタム関数を定義できます。

ミドルウェアについてより深く理解するには ミドルウェアに関するドキュメント を参照してください。

pages ディレクトリ

pages ディレクトリにはアプリケーションのビュー及びルーティングファイルを入れます。Nuxt.js フレームワークはこのディレクトリ内のすべての *.vue ファイルを読み込み、アプリケーションのルーターを作成します。

このディレクトリ名は変更できません。

ページの取り扱いについてより深く理解するには ページに関するドキュメント を参照してください。

plugins ディレクトリ

plugins ディレクトリには、ルートの Vue.js アプリケーションをインスタンス化する前に実行したい JavaScript プラグインを入れます。

プラグインについてより深く理解するには プラグインに関するドキュメント を参照してください。

static ディレクトリ

static ディレクトリには静的ファイルを入れます。このディレクトリ内のファイルはいずれも / に配置されます。

例: /static/robots.txt は /robots.txt に配置されます。

このディレクトリ名は変更できません。

静的ファイルの取り扱いについてより深く理解するには 静的ファイルに関するドキュメント を参照してください。

store ディレクトリ

store ディレクトリには Vuex ストア のファイルを入れます。Vuex ストアは Nuxt.js フレームワークではオプションとして実装されています。このディレクトリ内に index.js ファイルを作成すると、Nuxt.js フレームワーク内でこのオプションが自動的に有効になります。

このディレクトリ名は変更できません。

ストアの取り扱いについてより深く理解するには ストアに関するドキュメント を参照してください。

nuxt.config.js ファイル

nuxt.config.js ファイルには Nuxt.js のカスタム設定を記述します。

このファイル名は変更できません。

nuxt.config.js についてより深く理解するには nuxt.config.js に関するドキュメント を参照してください。

package.json ファイル

package.json ファイルにはアプリケーションが依存するパッケージやスクリプトを記述します。

このファイル名は変更できません。

エイリアス(別名)

エイリアス ディレクトリ
~ or @ srcDir
~~ or @@ rootDir

デフォルトでは srcDirrootDir と同じです。

情報: vue テンプレート内で assets または static ディレクトリへのリンクが必要なときは ~assets/your_image.png~static/your_image.png などを使ってください。

間違いを見つけた、またはドキュメントに貢献したいですか? GitHub でこのページを編集する