Want to take a look at our new docs? Our new docs are now in beta. Have fun!

ディレクトリ構造

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

ディレクトリ

assets ディレクトリ

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

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

components ディレクトリ

components ディレクトリには Vue.js のコンポーネントファイルを入れます。

このディレクトリ内のコンポーネントは asyncData を利用できません。

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 などを使ってください。

Contribution for this page is now closed. If you would like to contribute please check out our new docs are now in beta. Have fun!

Platinum Sponsors

StoryblokMoovweb Support Us