Nuxt3使用Bootstrap5下拉组件报document is not defined错误求助

document is not defined是Nuxt3 SSR（服务端渲染）场景下的典型报错：

• 服务端运行环境不存在浏览器专属的document、window全局对象，Bootstrap5下拉组件的JS逻辑依赖DOM API，在服务端执行时会直接抛出错误
• <ClientOnly>组件仅能控制模板内容的渲染时机，不会阻断<script setup>中顶层import语句在服务端的执行，这是你之前包裹组件没有生效的核心原因。

方案1：局部动态导入（推荐，按需加载） #

不要在script顶层导入Bootstrap的下拉模块，改为在onMounted生命周期中动态导入——onMounted只会在客户端环境执行，完全不会触发服务端的DOM API报错，同时需要手动初始化下拉实例。
修改Dropdown.vue代码如下：

<template>
  <div class="dropdown">
    <button
      class="btn btn-secondary dropdown-toggle"
      type="button"
      id="dropdownMenuButton1"
      data-bs-toggle="dropdown"
      aria-expanded="false"
    >
      Dropdown button
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'

onMounted(async () => {
  // 仅在客户端动态导入下拉模块
  const Dropdown = await import('bootstrap/js/dist/dropdown.js')
  // 初始化页面上的下拉触发器
  const dropdownTriggers = document.querySelectorAll('.dropdown-toggle')
  dropdownTriggers.forEach(trigger => new Dropdown.default(trigger))
})
</script>

这种方式不需要改动全局配置，按需引入的JS体积更小，适合仅少量用到Bootstrap组件的场景。

方案2：全局客户端引入（配置简单） #

如果项目中多处用到Bootstrap组件，可以直接在Nuxt配置中把Bootstrap的JS和CSS设置为仅客户端全局引入，组件里不需要写任何导入、初始化逻辑，原生的data-bs-toggle属性会自动生效。
提前在项目中安装好bootstrap依赖，之后修改nuxt.config.ts配置：

export default defineNuxtConfig({
  app: {
    head: {
      link: [
        // 引入Bootstrap样式文件
        { rel: 'stylesheet', href: 'bootstrap/dist/css/bootstrap.min.css' }
      ],
      script: [
        // 引入Bootstrap JS包，标记为仅客户端加载
        { 
          src: 'bootstrap/dist/js/bootstrap.bundle.min.js',
          ssr: false
        }
      ]
    }
  }
})

配置完成后，你原来写的Dropdown模板代码不需要任何修改，去掉script里的import语句就能直接运行。

所有依赖浏览器DOM API的第三方库，在Nuxt3中都不要在script顶层直接import，要么放在onMounted里动态导入，要么配置为仅客户端全局引入，从根源上避免SSR相关报错。

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