【Nuxt】ディレクトリ構造と各々の意味をまとめてみる【Vue】

どーも、ぐるたか@guru_takaです。

Nuxtを使い始めるにあたって、ディレクトリ構造を理解する必要があったので、自分の言葉でまとめてみました！

Nuxt初学者の参考になれば幸いです。

ディレクトリ構造

├── assets
├── static
├── components
├── layouts
├── pages
├── middleware
├── plugins
└── store

さっそく、説明しやすい順に、フォルダの意味について紹介していきます！

assets

cssやimage、Fontといったコンパイルされないファイル、かつwebpackするものを入れておきます。

詳しくは公式ページを確認してみてください！
参考 アセットNUXTJS

static

assetsのように静的ファイルを入れますが、webpackしないものを入れておきます。

”webpackしない”とは、直接サーバーのルート配下に配置することを意味します。

components

Vue.jsのコンポーネントファイルを入れる場所です。

layouts

予め決まっているようなページの大枠(サイドバーやヘッダー、フッターなど)のvueファイルを入れておきます。

具体例はこんな感じ！

<template>
  <div>
    <div>header</div>
    <nuxt />
    <div>footer</div>
  </div>
</template>

ページごとにレイアウトはこんな感じで変更可能です。

export default {
  layout: 'blog',//layoutsフォルダのblog.vueが呼び出される
  components: {
    Logo
  }
}

詳細は公式ページをご確認ください！

pages

アプリケーションのビュー及びルーティングファイルを入れておきます。ファイル構造によって、url決まるルーターのような役割です！

middleware

ページやレイアウトが呼び出される前に、実行したい関数を定義できます。

こちらの記事に、直接アクセス禁止にするmiddlewareの作り方がありますので、参考にしてみてください！
参考 Nuxtで直接アクセスを禁止にするmiddlewareを作るQiita

plugins

アプリケーションをインスタンス化する前に実行したいモノを入れておきます。

例えば、font awesomeなどのパッケージをプラグインに入れておけば、色んなコンポーネントで使えるようになります！

以下の記事にわかりやすい使い方が書かれているので、参考にしてみて下さい。

store

vuex関連のフォルダです！

最後に

公式サイトにもわかりやすく日本語で書かれていますので、ぜひ参考にしてみてください！