JavaScript

Nuxt.jsでレイアウトごとにbody要素にクラスを設定する方法

課題を持った人
課題を持った人
Nuxt.jsでレイアウトごとにbody要素にクラスを設定する方法が知りたいです。
筆者
筆者
わかりました。では早速みていきましょう。

結論:bodyAttrsオプションでクラス名を指定することで実現できます

layoutsディレクトリ内の.vueファイルに以下のように設定することで、レイアウトごとにbody要素にクラスを設定することが可能です。

body-styleの部分がクラス名なので、同.vueファイルで以下のように指定することでスタイルを適用することができます。

これでNuxt.jsでレイアウトごとにbody要素にクラスを設定する方法の説明は終わりですが、せっかくなのでレイアウトテンプレートの使い方のコツについてご紹介します。

もっとも多く使用するテンプレートはdefault.vueに設定しましょう。

もっとも多く使用するレイアウトテンプレートはdefault.vueに設定しましょう。

というのは、Nuxt.jsでは使用するレイアウトテンプレートの指定がない場合は、自動的にdefault.vueが選択されるからです。

使用頻度が高いレイアウトテンプレートをdefault.vueにすることで余計なコードが少なくなります。とても小さなことですがその積み重ねがコードを綺麗に保つことにつながります。

例えば、Webサイトでトップページと下層ページのレイアウトが異なることはよくあると思います。その場合は、トップページのレイアウトテンプレートをtop.vueとして下層ページのレイアウトテンプレートはdefault.vueにします。トップページは1ページ、下層ページは複数ページなのでその方が都合が良いのです。

コードにするとこんな感じです。

pages/index.vue(トップページ)ではレイアウトテンプレートに「top」を指定しています。

pages/about.vue(下層ページ)では、レイアウトテンプレートを指定していません。

ほんのすこしだけコードがスッキリしました。些細なことですが覚えておくといいかなと思います。

筆者
筆者
以上、Nuxt.jsでレイアウトごとにbody要素にクラスを設定する方法とレイアウトテンプレートの使い方のコツについて解説してみました。