Nuxt.jsのディレクトリ構造やファイルの役割

Vue.jsをサーバーサイドでレンダリングするNuxt.jsの環境構築方法

上記の記事のように環境構築すると以下のようなファイルやフォルダが作成されています。

ターミナル

$ tree -L 1
.
├── README.md
├── assets
├── components
├── layouts
├── middleware
├── node_modules
├── nuxt.config.js
├── package.json
├── pages
├── plugins
├── static
└── store

Nuxt.jsにおいてこのディレクトリはどのような役割を果たしているかの説明をさせていただきたいと思います。

Nuxt.jsのディレクトリやファイル

assetsディレクトリ

assetsのドキュメント

assetsディレクトリはコンパイルされていないLESSやSASS、JavaScriptのファイルを格納します。

componentsディレクトリ

componentsはVue.jsのコンポーネントファイルを格納します。Nuxt.jsはこのフォルダの中にあるコンポーネントのdataに手を加えたりはしません。なお、公式ドキュメントによると、pagesディレクトリ内のコンポーネントのdataには非同期データを扱えるように手を加えるとのことです。

layoutsディレクトリ

layoutsのドキュメント

layoutsのファイルを格納するディレクトリです。layoutsのファイルとは以下のように<template>タグ内に<nuxt/>を含む.vue形式のファイルです。

default.vue

<template>
<div>
<nuxt/>
</div>
</template>

各、pagesディレクトにある*.vueファイルでどのレイアウトを使用するかを指定します。指定がなければlayoutsのdefault.vueが使用される仕組みになっています。

middlewareディレクトリ

middlewareのドキュメント

アプリケーションのミドルウェアのファイルを格納するフォルダです。ミドルウェアは、ページまたはページのグループがレンダリングする前に実行される関数を定義できます。

pagesディレクトリ

pageのドキュメント

pagesディレクトリにはあなたのアプリケーションのビューやルーティングファイルを格納します。

例えば、このフォルダ内にabout.vueを作成するとNuxt.jsが自動的にルーターを作成し、http://expample.com/aboutというページを作成することができます。とても便利ですね。

pluginsディレクトリ

pluginのドキュメント

pluginsディレクトリにはルートのVue.jsアプリケーションをインスタンス化する前に実行したいJavaScriptsのファイルを格納します。

staticディレクトリ

staticのドキュメント

staticディレクトリには静的ファイルを格納します。静的ファイルとはwebpackで取り扱わないファイルで、例としては、robots.txtsitemap.xmlになります。

storeディレクトリ

storeのドキュメント

staticディレクトリにはVuexのストアファイルを格納します。VuexストアはNuxt.jsではオプション扱いとなります。オプションを有効にするにはこのディレクトリ内にindex.jsを作成すると有効になります。

node_modulesディレクトリ

node_modulesディレクトリにはnpmやyarnコマンドなどを使ってインストールしたnodeモジュールが格納されています。

nuxt.config.jsファイル

nuxt.config.jsのドキュメント

nuxt.config.jsはNuxt.jsの設定をするファイルです。<head>タグ内のメタタグの設定などができます。

package.jsonファイル

nodeモジュールの管理や、npm runコマンドの設定を行うことができます。

© 2011 - 2017 ShoYamane