1.安装bootstrap5.2.3
npm install [email protected]
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>
扫描二维码关注公众号,回复:
15503496 查看本文章
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