如何在Nuxt 3项目中安装Bootstrap Table

一、安装依赖 #

首先安装适配 Vue3 的 Bootstrap Table 包及相关依赖：

npm install bootstrap bootstrap-table-vue-next @popperjs/core

注意：必须安装 bootstrap-table-vue-next，这是官方针对 Vue3 推出的版本，旧版 bootstrap-table-vue 仅支持 Vue2，不兼容 Nuxt3。

二、配置 Nuxt 3 项目 #

1. 引入全局样式 #

在 nuxt.config.ts 中添加 Bootstrap 和 Bootstrap Table 的 CSS 文件路径，确保样式全局生效：

export default defineNuxtConfig({
  css: [
    'bootstrap/dist/css/bootstrap.min.css',
    'bootstrap-table/dist/bootstrap-table.min.css'
  ]
})

2. 注册组件（两种方式可选） #

方式一：全局注册（推荐）

在项目根目录的 plugins 文件夹下创建 bootstrap-table.ts 文件，内容如下：

export default defineNuxtPlugin(nuxtApp => {
  import BootstrapTable from 'bootstrap-table-vue-next'
  nuxtApp.vueApp.use(BootstrapTable)
})

Nuxt3 会自动加载 plugins 目录下的文件，全局注册后所有页面可直接使用 <BootstrapTable> 组件。

方式二：按需导入

如果仅在部分页面使用，可在对应页面的 <script setup> 中直接导入组件：

<script setup>
import { BootstrapTable } from 'bootstrap-table-vue-next'
</script>

三、测试验证 #

在任意页面中编写测试代码，验证表格是否正常渲染：

<template>
  <div class="container mt-4">
    <BootstrapTable :columns="tableColumns" :data="tableData" />
  </div>
</template>

<script setup>
const tableColumns = [
  { field: 'id', title: 'ID', sortable: true },
  { field: 'title', title: '标题' },
  { field: 'content', title: '内容' }
]

const tableData = [
  { id: 1, title: '测试项1', content: '这是第一条测试数据' },
  { id: 2, title: '测试项2', content: '这是第二条测试数据' }
]
</script>

启动项目 npm run dev，访问页面即可看到正常渲染的 Bootstrap Table。

实操注意要点 #

• 若出现样式错乱，检查 nuxt.config.ts 中 CSS 路径是否正确，避免与项目内其他全局样式冲突；
• 动态更新表格数据时，确保数据使用 ref 或 reactive 包裹，保证响应式更新；
• 如需使用 Bootstrap Table 的扩展功能（如导出、筛选），需额外安装对应扩展包并按照官方文档配置。

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