【Nuxt.js】 layoutsディレクトリについて

こんにちは、キャメルスタジオのフロントエンドエンジニアの谷口です。
今回はNuxtのlayoutsディレクトリについてご紹介します。

Nuxtにはlayoutsディレクトリがデフォルトで存在しており、この中にdefault.vueというファイルが格納されています。
このファイルが全ページデフォルトのレイアウトファイルになります。

もし、

・ページによってレイアウトを変えたい！
・読み込むコンポーネントを分けたい！

といった場合、このレイアウトファイルを分ける必要があります。
ファイルを分けずに実装もできますが分けたほうがわかりやすく管理もしやすいですよね。

それでは、管理画面用にレイアウトファイルを作成していきます。
サイトをdefault.vue、管理画面をadmin.vueとした場合、
layoutsフォルダ内に管理画面用のadmin.vueを作成します。

そしてレイアウトを適用したいファイルのscript内に

export default {
    layout: "admin"
}

のようにlayoutの記述を追加することで、
先ほど追加したlayouts/admin.vueのファイルが適用されます。
なにも記載がなければdefault.vueを読み込んでくれます。

レイアウトファイルを分けたので、admin.vueを適用している管理画面だけに適用されるスタイルを記述してみましょう！

layouts/admin.vueの中に

<style>
    .text {
        font-size: 1.6rem;
    }
</style>

を記述します。
これで「レイアウトを分けたから管理画面にだけ効くだろう」と思ったのですが、以下のように出力されるので全体に適用されてしまいます。

<style>
  .text { font-size: 1.6rem; }
<style>

レイアウトを分けたからといって、そのページだけに適用してくれないんですね。

ではどうするかというとstyleタグにscopedをいれます。

<style scoped>
  .text {
    font-size: 1.6rem;
  }
</style>

scopedにより「このファイルのみに適用する」とVue.jsが認識し、以下のようにhtmlとcssを出力してくれます。

// html
<div data-v-f3f3eg9 class="text"> ... </div>

// css
.text[data-v-f3f3eg9] { font-size: 1.6rem; }

サイトのdefault.vueのほうには効かなくなります。
layoutを分けても油断は禁物ですね。
vueはそれぞれのファイル、コンポーネントにスタイルを書くことができます。
すべてのページに効かせる場合は共通のcssを作成し読み込むなど工夫するといいかもしれないですね。

以上、Nuxt.jsのlayoutsについてでした。
最後までお読みいただきありがとうございました。