「create-nuxt-app」を使って作成したプロジェクトの構成

「create-nuxt-app」を使ってNuxt.jsのプロジェクトを簡単に作成することができますが、Nuxt.js初心者だと作成後のディレクトリやファイルの構成がどうなっているか分からなかったのでメモしておきます。

「create-nuxt-app」で作成したプロジェクトの構成は以下の通りとなっています。

それぞれのディレクトリやファイルについて簡単に説明します。

Nuxt.jsが裏で自動的に色々やって生成されるファイルが格納されているディレクトリ。

.nuxt配下は以下のような構成となっています。

例えば、pagesディレクトリ配下に新しいページ（.vue）を追加して実行すると、.nuxtディレクトリ直下のroutet.jsに追加したページが自動で追加されるので、自分でルーティングの設定をするといった作業をしなくて済みます。

基本的にはファイルの内容を自分で変更したりはせず、動作しない時の原因調査や参考などで確認する程度になります。

HTMLのimgタグやCSSのurlなどで参照する画像ファイルを格納しておくディレクトリ。

Webpackの対象で、Webpackしたくない場合は同階層の static ディレクトリを使用します。

アセット - NuxtJS

コンポーネントの置き場所。

デフォルトでは Logo（Logo.vue）コンポーネントがあり、pages/index.vue で呼び出されているので、作成する場合はこれを参考にします。

作成したコンポーネントの呼び出し方は以下のようになります。

<template>
  <div>
    <logo />
  </div>
</template>

<script>
import Logo from '~/components/Logo.vue'

export default {
  components: {
    Logo
  }
}
</script>

各ページ共通のレイアウト部。デフォルトでは「default.vue」ファイルが用意されています。

default.vue ファイル内のタグ <nuxt /> の箇所でpages配下のvueが呼び出されます。

また、HTMLの大元であつheadやbodyを修正したい場合、「.nuxt/views/app.template.html」ファイルの内容をコピーして、プロジェクト直下に「app.html」というファイルを作成すると、app.htmlを元にページが生成されるようになります。

このため、ページを構成する要素のイメージとしては、app.html > layouts/default.vue > pages/*.vue のようになります。

ページがレンダリングされる前に実行したいカスタム関数を格納する場所。ページにアクセスされた際の認証状態のチェックなどで利用します。

詳しくは以下を参照。

ルーティング - NuxtJS

Node.js利用者にはお馴染みのNode.jsでインストールされたファイルが格納される場所。

内容を書き換えたりすることはNGです。

各ページのファイル（.vue）を格納するディレクトリ。

配下のファイルやディレクトリの名称がそのままURLのパスになります。

• index.vue > /
• products/index.vue > /products
• products/order.vue > /products/order

URLにパラメータを含める場合もファイル名で定義します。

• products/_id.vue > /products/:id

渡されたURLパラメータはページ内（.vue）で以下のようにして利用することができます。

<template>
  <div>
    <p>id:{{this.$route.params.id}}</p>
  </div>
</template>

<script>
export default {
  validate({ params }) {
    return /^\d+$/.test(params.id)
  }
}
</script>

上記コードのvalidate()は渡されたURLパラメータの検証（数値かどうか）を行っています。

アプリケーションで使用するJavaScriptプラグインを格納するディレクトリ。

Firebaseを利用するアプリの場合、ここに「firebase.js」ファイルを配置して、初期化処理などを実装します。

プラグイン - NuxtJS

静的なファイルを格納しておくディレクトリ。

デフォルトでは favicon.ico ファイルが格納されていて、ビルドするとルート直下にstaticディレクトリ内のファイルが配置されます。

他には、robots.txt や sitemap.xml などを置いておくディレクトリになります。

各ページやコンポーネントでVuexを使った共通のデータ（状態）を定義しておく場所。

ストアには、モジュールモード（store/*.js）とクラッシックモード（store/index.js）の2つのモードがあり、好みで選んでいいですが、コード量が多くなる場合はモジュールモードを利用した方がメンテがしやすいです。

Vuex ストア - NuxtJS

Nuxt.jsの設定ファイル。

モード（universal、spa）やヘッダ情報の設定などが可能です。