**变量1.**将其添加到nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css', integrity: 'sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor', crossorigin: 'anonymous' }
      ],
      script: [
        { src: 'https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js', integrity: 'sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2', crossorigin: 'anonymous' }
      ]
    }
  }
})

缺点：需要手动版本控制，不能使用SASS功能。

变体2.

1.在@popperjs/core旁边安装 Bootstrap

yarn add bootstrap @popperjs/core

1.创建plugins/useBootstrap.client.ts文件

import bootstrap from 'bootstrap/dist/js/bootstrap.bundle'

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.provide('bootstrap', bootstrap)
})

不需要手动导入它，因为Nuxt 3会为你做。Bootstrap JS应该可以在你的组件/页面中通过

const { $bootstrap } = useNuxtApp()

1.创建assets/styles/main.scss文件

@import 'bootstrap/scss/bootstrap';

1.将其添加到nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  css: ['~/assets/styles/main.scss']
})

您可以根据需要单独导入JavaScript插件，以降低包大小：

import Alert from 'bootstrap/js/dist/alert';

或者，指定您需要的插件：

import { Tooltip, Toast, Popover } from 'bootstrap';