How can Bootstrap 5 be utilized in conjunction with Vue 3?

edit

Bootstrap 5 can be utilized in conjunction with Vue 3 in many ways. Here are the steps to use Bootstrap 5 in Vue 3:

Step 1: Install Bootstrap 5 using npm by running this command in the terminal:

npm install bootstrap@next

Step 2: Import the style sheet of Bootstrap in your main.js file:

import 'bootstrap/dist/css/bootstrap.css'

Step 3: Create a new Vue 3 project and import the necessary components from Bootstrap. For example, if you want to use the Navbar component, you can import it like this:

<template>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" 
              data-bs-target="#navbarNav" aria-controls="navbarNav" 
              aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#" tabindex="-1" 
               aria-disabled="true">Disabled</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</template>

<script>
// Importing Bootstrap
import 'bootstrap/dist/js/bootstrap.js'
import 'bootstrap/dist/css/bootstrap.css'

export default {
  name: 'Navbar',
  components: {}
}
</script>

Step 4: Use the imported component in your Vue 3 project.

By following these steps, you can use Bootstrap 5 in your Vue 3 project seamlessly.