Nuxt3通过nuxt.config.ts引入bootstrap-vue不生效如何解决

云上老周

2026-8-29

问题成因

BootstrapVue官方提供的Nuxt模块仅兼容Nuxt 2版本，不支持Nuxt3，和配置文件是js还是ts格式没有关系。
Nuxt3基于Vue3 + Nitro构建，和Nuxt2的模块系统、Vue插件注册逻辑完全不兼容；而当前BootstrapVue稳定版是基于Vue2开发的，你写入modules数组的bootstrap-vue/nuxt模块根本无法在Nuxt3环境中正常加载执行，自然无法完成组件注册，使用<b-button>时就会抛出组件未识别的错误。

解决方案

根据自身需求二选一即可：

方案1：使用适配Vue3/Nuxt3的BootstrapVue3版本，保留原有b-*组件的开发习惯
1. 先卸载之前安装的Vue2版本BootstrapVue相关依赖，避免版本冲突
```
npm uninstall bootstrap-vue bootstrap
```
2. 安装适配Vue3的版本及对应依赖
```
npm install bootstrap bootstrap-vue-3
```
3. 在项目根目录的plugins文件夹下新建bootstrap-vue.client.ts文件（加.client后缀限定插件仅在客户端运行，避免SSR阶段报错），写入以下内容：
```
import BootstrapVue3 from 'bootstrap-vue-3'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(BootstrapVue3)
})
```
4. 不需要在nuxt.config.ts中添加任何modules相关配置，重启开发服务后即可直接使用<b-button>等所有BootstrapVue组件。
方案2：直接引入原生Bootstrap 5，不依赖封装的Vue组件
如果不需要封装好的b-*系列组件，仅使用Bootstrap的样式和原生交互能力，这种方式更轻量：
1. 安装依赖
```
npm install bootstrap @popperjs/core
```
2. 修改nuxt.config.ts，全局引入Bootstrap核心样式
```
export default defineNuxtConfig({
  css: [
    'bootstrap/dist/css/bootstrap.min.css'
  ]
})
```
3. 在plugins文件夹下新建bootstrap.client.ts文件，写入以下内容引入Bootstrap的交互JS：
```
import 'bootstrap/dist/js/bootstrap.bundle.min.js'
```
配置完成重启服务后，直接在模板中使用Bootstrap原生class即可，比如按钮写<button class="btn btn-primary">按钮</button>。