Nuxt.jsでhtmlやbodyにclassを追加する

2021.10.08

Nuxt.jsでhtmlやbodyに対してclassを設定する方法をメモ。

サンプルコード

サイト全体で設定したい場合、nuxt.config.jsのheadプロパティで設定します。

export default {
  head: {
    htmlAttrs: {
      class: ['html-class']
    },
    bodyAttrs: {
      class: ['body-class']
    }
  }
}

名前で何となくわかると思いますが、htmlAttrsはhtmlタグに対して属性を設定、bodyAttrsはbodyタグに対して属性を設定できます。
これでhtmlとbodyに対してclassの設定ができました。

<!doctype html>
<html class="html-class">
<head >
〜略〜
</head>
<body class="body-class">

個別に設定したい場合、そのページ内でheadを使って設定します。

export default {
  head: {
    htmlAttrs: {
      class: ['single-html-class']
    },
    bodyAttrs: {
      class: ['single-body-class']
    }
  }
}

注意点として、nuxt.config.jsで共通の設定をした上でページ毎で個別に設定した場合、個別の設定で上書きされるのではなく、共通と個別の両方が設定されるようです。
今回の場合は以下のような表示になりました、

<!doctype html>
<html class="html-class single-html-class">
<head >
〜略〜
</head>
<body class="body-class single-body-class">

参考サイト

土