Nuxt3で特定の画面だけbody背景を変える

管理画面は白背景、黒文字、それ以外は黒背景、白文字。それだけのことなのにえらく時間を食った・・・以下、解決方法。

管理画面用のlayoutを作る

• layouts/admin.vueを作る（ファイル名はなんでも良い）
• useHead#bodyAttrsでbodyタグにclassを付与する

<script setup lang="ts">
useHead({
  bodyAttrs: {
    class: "admin"
  },
})
</script>

• これでこのlayoutを使うpageはbodyにadminが付与されるようになる
• 特定のpageのみ背景を変えたい時は、そのpageのコンポーネントで上記の記述をすればよい

cssを用意

• assets/css/app.cssを作る（ファイル名はなんでも良い）
• body.adminのスタイルを記述

body.admin {
  background-color: #fff;
  color: #000;
}

• nuxt.config.tsで上記cssを読むようにする

export default defineNuxtConfig({
  css: ["~/assets/css/app.scss"]
})