nuxtjs3 引入bootstrap5

1.安装bootstrap5.2.3

npm install bootstrap@5.2.3

2.在nuxt.config.ts配置bootstrap

export default defineNuxtConfig({

  css: ["bootstrap/dist/css/bootstrap.min.css"],

})

3.在plugins文件夹新建插件bootstrap.client.js

import * as bootstrap from 'bootstrap'

export default defineNuxtPlugin(() => {
  return {
    provide: {
      bootstrap: bootstrap
    }
  }
})

4.使用

<script setup>

const { $bootstrap } = useNuxtApp()

  const modalElement = document.querySelector('#yourModalID')

  const modal = $bootstrap.Modal.getInstance(modalElement)

  modal.hide()

参考：

https://github.com/nuxt/framework/discussions/9700

How to integrate bootstrap 5 with nuxt 3? · Discussion #5240 · nuxt/framework · GitHub