Nuxt/Buefy项目中<client-only>组件在b-navbar内显示异常求助

算力阿峰

2026-10-2

问题原因

核心是Buefy的b-navbar组件插槽的客户端hydrate（激活）不匹配，和你重装依赖后组件版本变动直接相关：
1. 你的package.json中Buefy/Nuxt相关依赖如果用了^前缀的版本号，删除node_modules重新安装会拉取兼容范围内的最新小版本，新版本的b-navbar对SSR阶段的插槽渲染逻辑做了调整
2. <client-only>组件在SSR阶段默认渲染空内容，因此服务端返回的b-navbar的#end插槽内只有nav-link对应的DOM结构
3. 新版本b-navbar在客户端激活时，会直接复用服务端返回的插槽DOM结构，不会主动检测<client-only>需要在客户端追加内容，Vue的激活逻辑认为这部分DOM已经和虚拟DOM匹配，因此不会渲染user-location组件
4. 热重载时是客户端局部更新，跳过了服务端渲染结果的激活校验步骤，所以组件可以正常显示；放在b-navbar外部时，普通DOM容器的激活逻辑可以正确识别<client-only>的更新需求，因此也能正常渲染

解决方案

方案1：给<client-only>组件添加唯一key，强制客户端激活时重新渲染该节点

<client-only key="site-header-user-location">
  <user-location usage=siteHeader />
</client-only>

方案2：锁定Buefy版本到重装前可用的版本，去掉版本号前的^前缀后重新安装依赖即可，例如：
```
"dependencies": {
  "buefy": "0.9.22" // 替换为你之前正常使用的版本号
}
```
方案3：如果不需要b-navbar做SSR渲染，直接给b-navbar添加v-if="$isClient"标识，仅在客户端渲染整个导航栏
```
<b-navbar centered class=navbar v-if="$isClient">
```