【nuxt.js】bodyやhtmlの要素にクラスを指定してCSSを追記する方法！

あきぞらです。nuxt.jsを勉強中です。

開発をしていて、bodyやhtmlの要素にクラスを指定したい場面がありました。

今回はその方法について紹介していきます。

default.vueの中で指定する

nuxtには、default.vueというファイルでデフォルトのレイアウト（常に設定が反映される）を設定できます。

ここのファイルのなかで指定します。

公式のこちらに記載がありました。

vue-meta.nuxtjs.org

API Reference | Vue Meta

https://vue-meta.nuxtjs.org/api/#htmlattrs

HTML Metadata manager for Vue.js

以下のように、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%が設定されるようになりました。