Nuxt.jsでページを作っていくと、最終的に出力されるHTMLは
<html>
<body>
<div id="__nuxt">
<div id="__layout">
<div class="container"> <!-- layouts ファイル の１行目 -->
のような構造になります。
このhtmlやbodyにidやclass、dataなどを設定するにはどうすればいいのかを調べるのにちょっとだけ時間がかかりました。
時間がかかった代わりに、3種類やり方が見つかったのでまとめておきます。
app.htmlをルートディレクトリに作成
ビュー - Nuxt.jsに書いてあったので、一番基本的な方法だと思われます。
スクリプトまたは条件付きの CSS クラスを含めるために Nuxt.js で使われる HTML アプリテンプレートをカスタマイズできます。
テンプレートを変更するために、プロジェクトのルートフォルダに app.html ファイルを作成します。
ルートディレクトリ（nuxt.config.jsと同じフォルダ）にapp.htmlを作成し、
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
<head {{ HEAD_ATTRS }}>
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }} class="body-class">
{{ APP }}
</body>
</html>
のように書けばクラスが追加されます。
この方法はわかりやすいですが、ルートディレクトリにわざわざ新しいファイルを作るのがちょっと大袈裟に感じますし、余計なところを弄ってしまいそうで怖いです。
layoutまたはpagesに追記
layoutフォルダに追記する場合。
tag BODY modification · Issue #188 · nuxt/nuxt.js
このページにやり方が載っていました。
<script>
export default {
head: {
bodyAttrs: {
class: 'body-class'
}
}
}
</script>
この方法はわかりやすくてミスも少ないですが、layoutやpageが複数ある時に一括設定するのが面倒です。
nuxt.config.jsで設定
/*
** Headers of the page
*/
head: {
title: pkg.name,
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: pkg.description }
],
bodyAttrs: {
class: 'body-class'
},
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
nuxt.jsに慣れている方は、2番目の方法を見た時点でわかるかもしれませんが、このようにすれば全ページ共通で設定することができます。
※ nuxt.config.jsの設定変更はホットリロードされないことがあるので、反映されない場合は一度停止してから再度npm run devしてください。
いつ使うのか？
Bulmaで固定ヘッダーを設定する際に、has-navbar-fixed-topをbodyに付けるために使いました。
Navbar | Bulma: Free, open source, & modern CSS framework based on Flexbox
CSSフレームワークを使う場合に必要になることは多いのではないでしょうか。