Nuxt.js

【Nuxt.jsに入門してみた】ディレクトリ構成について

2020/02/08

Nuxt.jsのディレクトリ構成

・「assets」ディレクトリ 画像や未コンパイルのsass・JSファイルなどを置くディレクトリ。 webpackのバンドル対象になる。

・「components」ディレクトリ コンポーネント(.vueファイル)を置いておくディレクトリ。 基本的には、vue-cliで立ち上げたvueプロジェクトの「components」と同じ役割。

・「layouts」ディレクトリ layout用のコンポーネントを置いておくディレクトリ。

・「middleware」ディレクトリ ミドルウェアファイルを設置する。

Nuxt.jsにはmiddlewareという機能が用意されており、 「各ページにアクセスする際に、前処理をかます」といったことが簡単にできるようになっている。 (ログイン確認とか)

・「pages」ディレクトリ page用のコンポーネントを設置しておく。

ここにディレクトリやファイルを設置しておくと、 ファイルパスと同じ形で、Nuxtが自動的にルーティングも設定してくれるようになる。

・「plugins」ディレクトリ 外部プラグインの設定や、グローバルで使いたいコンポーネントの登録処理を行うファイルを設置したりする。

※説明が難しいので、詳しいことは別記事で紹介。

・「static」ディレクトリ robots.txtなど、静的ファイルをここに置く。 ここに置いたファイルは、以下の形式でアクセスできるようになる。

http://設置先URL/ファイル名

・「store」ディレクトリ Vuex関連のファイルを置く。(Nuxt.jsには、Vuexもバンドルされている)