プログラミング

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

あきぞらです。

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に記載します。

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

-プログラミング

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