Nuxt 3中如何通过useHead替换body类而非追加？

核心问题原因 #

Nuxt3的useHead默认开启merge模式，会将新配置与现有head配置合并，包括bodyAttrs.class，导致路由切换时新的body类被追加到旧类后面。

可行方案 #

方案1：使用useHead并禁用合并 #

如果你的页面需要同时配置其他head属性（如title、meta标签），可以直接在useHead中设置merge: false，让当前配置完全替换之前的head内容：

const { data } = useFetch('/api/page-data')

useHead({
  bodyAttrs: {
    // 用computed确保数据加载完成后再更新类名
    class: computed(() => data.value ? `page--${data.value.bodyClass}` : '')
  },
  // 可同时配置其他head属性，比如页面标题
  title: computed(() => data.value?.pageTitle || '默认标题')
}, {
  merge: false // 关键：禁用合并，实现完全替换
})

方案2：使用useBodyAttrs精准控制body属性 #

如果只需要修改body的类名，推荐使用Nuxt3专门提供的useBodyAttrs组合式函数，仅针对body属性进行操作，不会影响其他head配置：

const { data } = useFetch('/api/page-data')

// 响应式获取body类名
const bodyClass = computed(() => data.value ? `page--${data.value.bodyClass}` : '')

useBodyAttrs({
  class: bodyClass
}, {
  merge: false // 替换body类而非合并
})

注意事项 #

• 必须使用computed包裹类名，确保useFetch加载完数据后，body类能自动更新
• 两种方案都支持SSR，无需操作原生document对象，完全适配服务端渲染场景

内容的提问来源于stack exchange，提问作者Koen Verbruggen