Nuxtjs3 introduces bootstrap5

1. Install bootstrap5.2.3

npm install [email protected]

2. Configure bootstrap in nuxt.config.ts

export default defineNuxtConfig({

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

})

3. Create a new plugin bootstrap.client.js in the plugins folder

import * as bootstrap from 'bootstrap'

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

4. use

<script setup>

const { $bootstrap } = useNuxtApp()

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

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

  modal.hide()

reference:

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

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