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

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">

参考サイト

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2021年11月
 123456
78910111213
14151617181920
21222324252627
282930