ディレクトリ構造

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

ディレクトリ

assets ディレクトリ

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

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

components ディレクトリ

components ディレクトリには Vue.js のコンポーネントファイルを入れます。これらのコンポーネントでは asyncDatafetch を使うことはできません。

layouts ディレクトリ

layouts ディレクトリはアプリケーションのレイアウトを含みます。レイアウトはページの外観を変更するために使用されます(例えばサイドバーなど)。

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

このディレクトリは特別な設定なしでは名前を変更できません。

middleware ディレクトリ

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

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

pages ディレクトリ

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

このディレクトリは特別な設定なしでは名前を変更できません。

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

plugins ディレクトリ

plugins ディレクトリには、ルートの Vue.js アプリケーションをインスタンス化する前に実行したい JavaScript プラグインを入れます。 ここはコンポーネントをグローバルに登録したり、関数や定数を挿入するための場所です。

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

static ディレクトリ

static ディレクトリは直接サーバのルートに配置され(/static/robots.txthttp://localhost:3000/robots.txt でアクセス可能です)、変更されない可能性の高いファイルが含まれています(例えば、favicon など)。

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

このディレクトリは特別な設定なしでは名前を変更できません。

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

store ディレクトリ

store ディレクトリには Vuex ストア のファイルを入れます。Vuex ストアは Nuxt.js に付属していますが、デフォルトでは無効になっています。このディレクトリに index.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 でこのページを編集する