課題を持った人
Nuxt.jsでレイアウトごとにbody要素にクラスを設定する方法が知りたいです。
筆者
わかりました。では早速みていきましょう。
スポンサードサーチ
結論：bodyAttrsオプションでクラス名を指定することで実現できます
layoutsディレクトリ内の.vueファイルに以下のように設定することで、レイアウトごとにbody要素にクラスを設定することが可能です。
1 2 3 4 5 6 7 8 9 | <script> export default { head: { bodyAttrs: { class: 'body-style' } } } </script> |
body-styleの部分がクラス名なので、同.vueファイルで以下のように指定することでスタイルを適用することができます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <template></template> <style> .body-style { background-color: #eee; } </style> <script> export default { head: { bodyAttrs: { class: 'body-style' } } } </script> |
これでNuxt.jsでレイアウトごとにbody要素にクラスを設定する方法の説明は終わりですが、せっかくなのでレイアウトテンプレートの使い方のコツについてご紹介します。
もっとも多く使用するテンプレートはdefault.vueに設定しましょう。
もっとも多く使用するレイアウトテンプレートはdefault.vueに設定しましょう。
というのは、Nuxt.jsでは使用するレイアウトテンプレートの指定がない場合は、自動的にdefault.vueが選択されるからです。
使用頻度が高いレイアウトテンプレートをdefault.vueにすることで余計なコードが少なくなります。とても小さなことですがその積み重ねがコードを綺麗に保つことにつながります。
例えば、Webサイトでトップページと下層ページのレイアウトが異なることはよくあると思います。その場合は、トップページのレイアウトテンプレートをtop.vueとして下層ページのレイアウトテンプレートはdefault.vueにします。トップページは1ページ、下層ページは複数ページなのでその方が都合が良いのです。
コードにするとこんな感じです。
pages/index.vue（トップページ）ではレイアウトテンプレートに「top」を指定しています。
1 2 3 4 5 6 7 8 9 10 | <script> export default { layout: 'top', head() { return { title: 'top' } } } </script> |
pages/about.vue（下層ページ）では、レイアウトテンプレートを指定していません。
1 2 3 4 5 6 7 8 9 | <script> export default { head() { return { title: 'about' } } } </script> |
ほんのすこしだけコードがスッキリしました。些細なことですが覚えておくといいかなと思います。
筆者
以上、Nuxt.jsでレイアウトごとにbody要素にクラスを設定する方法とレイアウトテンプレートの使い方のコツについて解説してみました。
スポンサードサーチ
スポンサードサーチ
