Vue 3 Bootstrap 5 Setup

—

### **1. Install Bootstrap via npm/yarn/pnpm**
Run one of the following commands in your Vue 3 project directory:

#### Using npm:

npm install bootstrap

#### Using Yarn:

yarn add bootstrap

#### Using pnpm:

pnpm add bootstrap

—

### **2. Import Bootstrap in Your Project**
You need to import Bootstrap's CSS and optionally its JavaScript.

#### **A. Import Bootstrap CSS in `main.js`**
Open `main.js` (or `main.ts` if using TypeScript) and add:

import { createApp } from 'vue';
import App from './App.vue';
import 'bootstrap/dist/css/bootstrap.min.css';

const app = createApp(App);
app.mount('#app');

This ensures Bootstrap styles are applied globally.

—

#### **B. Import Bootstrap JavaScript (Optional)**
If you need Bootstrap’s JavaScript components (like modals, tooltips, dropdowns, etc.), import Bootstrap’s JS and Popper.js in `main.js`:

import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

Alternatively, if you only need specific Bootstrap components, import them individually:

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

—

### **3. Use Bootstrap Classes in Your Vue Components**
Now you can use Bootstrap 5 classes in your Vue templates:

<template>
  <div class="container mt-5">
    <button class="btn btn-primary">Click Me</button>
  </div>
</template>

—

### **4. (Optional) Using Bootstrap Icons**
If you also want Bootstrap Icons, install them separately:

npm install bootstrap-icons

Then import them in `main.js`:

import 'bootstrap-icons/font/bootstrap-icons.css';

Now you can use icons like:

<i class="bi bi-star-fill"></i>

—

### **You're Done! 🎉**
Bootstrap 5 is now installed and ready to use in your Vue 3 project. 🚀 Let me know if you need any further assistance! 😊