Vue/Nuxt

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

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

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

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

default.vueの中で指定する

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

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

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

以下のように、bodyhtmlの要素にクラスを指定します。

<script>
export default {
  head: {
    htmlAttrs: {
      class: 'html-class'
    },
    bodyAttrs: {
      class: 'body-class'
    }
  }
}
</script>

僕はhtmlbodyの要素にheight: 100%を指定したかったので、

これで指定できるようになりました。

<style>
.html-class {
  height: 100%;
}
.body-class {
  height: 100%;
}
</style>

どちらもdefault.vueに記載します。

これで常にhtmlbody要素にheight: 100%が設定されるようになりました。

-Vue/Nuxt

Copyright© あきぞらてっく , 2025 All Rights Reserved Powered by AFFINGER5.