あきぞらです。nuxt.js
を勉強中です。
開発をしていて、body
やhtml
の要素にクラスを指定したい場面がありました。
今回はその方法について紹介していきます。
default.vueの中で指定する
nuxt
には、default.vue
というファイルでデフォルトのレイアウト(常に設定が反映される)を設定できます。
ここのファイルのなかで指定します。
公式のこちらに記載がありました。
以下のように、body
やhtml
の要素にクラスを指定します。
<script> export default { head: { htmlAttrs: { class: 'html-class' }, bodyAttrs: { class: 'body-class' } } } </script>
僕はhtml
、body
の要素にheight: 100%
を指定したかったので、
これで指定できるようになりました。
<style> .html-class { height: 100%; } .body-class { height: 100%; } </style>
どちらもdefault.vue
に記載します。
これで常にhtml
、body
要素にheight: 100%
が設定されるようになりました。