如何在Nuxt3页面组件中按需引入单个Bootstrap5 JS组件？

你之前的写法不生效的核心原因是：单独引入Bootstrap 5的单组件JS模块时，不会自动扫描data-bs-toggle属性完成初始化，必须手动绑定DOM实例，同时要适配Nuxt 3的SSR渲染逻辑，具体操作如下：

• 安装依赖
  先确保项目已安装Bootstrap 5依赖：

  npm install bootstrap@5
  

• 重写Dropdown组件逻辑
  利用Vue的生命周期钩子，在组件客户端挂载完成后手动初始化Dropdown实例，组件卸载时销毁实例避免内存泄漏，完整代码如下：

  <template>
    <div class="dropdown">
      <button
        ref="dropdownTrigger"
        class="btn btn-secondary dropdown-toggle"
        type="button"
        id="dropdownMenuButton1"
        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 { ref, onMounted, onUnmounted } from 'vue'
  // 仅引入Dropdown模块，其余Bootstrap JS组件不会被打包，自动完成摇树优化
  import Dropdown from 'bootstrap/js/dist/dropdown'
  
  const dropdownTrigger = ref(null)
  let dropdownInstance = null
  
  onMounted(() => {
    // onMounted仅在客户端执行，不会触发SSR报错
    if (dropdownTrigger.value) {
      dropdownInstance = new Dropdown(dropdownTrigger.value)
    }
  })
  
  onUnmounted(() => {
    // 组件卸载时销毁实例，避免内存泄漏
    dropdownInstance?.dispose()
  })
  </script>
  

  原来写的data-bs-toggle="dropdown"属性可以删除，这个属性只在Bootstrap全量引入、开启全局自动初始化时生效，手动初始化场景下不需要。外层套的<ClientOnly>可以保留也可以去掉，因为onMounted本身不会在服务端执行，不会出现报错。

• （可选）CSS按需引入
  如果不想全量引入Bootstrap的CSS文件增大包体积，可以在全局样式文件中仅引入用到的样式片段，以SCSS为例：

  // 按依赖顺序引入基础模块和需要的组件样式
  @import "bootstrap/scss/functions";
  @import "bootstrap/scss/variables";
  @import "bootstrap/scss/mixins";
  @import "bootstrap/scss/buttons";
  @import "bootstrap/scss/dropdown";
  @import "bootstrap/scss/container"; // 用到container类时引入
  

注意：不要引入全量的bootstrap.js或者bootstrap.bundle.js，否则会把所有Bootstrap组件都打包进产物，达不到按需引入、摇树优化的效果。所有依赖JS能力的Bootstrap 5组件都可以复用这个逻辑，从对应路径引入组件类，在挂载生命周期手动初始化即可。

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