How To Install Bootstrap 5 In Vue 3 With Bootstrap Icons

Let’s create a new Vue 3 application, install Bootstrap 5 with Icons, and configure it to be available in all vue.js components.

Creating Vue 3 app with Vite

We will create a new Vue 3 app with Vite, an alternative to Vue-CLI. It’s recommended for use. let’s  scaffold the project I’m using npm, you will find yarn command as well.

npm create vite@latest my-vue-app -- --template vue

yarn create vite my-vue-app --template vue

After Scaffolding the project go to the installation directory in your terminal and install the needed packages

cd my-vue-app
npm install 

Finally, run the development server to check if everything was installed correctly

npm run dev 

Installing Bootstrap 5 In Vue 3

Let’s install Bootstrap via npm or yarn

npm i bootstrap
yarn add bootstrap

After finishing installation let’s add bootstrap to our app in src\main.js

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

createApp(App).mount('#app')

This is how the file should be, but you can remove any HTML or style of Vite in src\style.css and src\App.vue

Now your application is ready for using bootstrap. You can add a button component in the app.vue <template> to make sure.

<template>
 <div>
  <button type="button" class="btn btn-primary">Primary</button>
   <button type="button" class="btn btn-secondary">Secondary</button>
 </div>
</template>

Bootstrap Icons Installation

Bootstrap 5 comes with a package of beautiful icons that cover almost everything you need in your app, let’s install it.

npm i bootstrap-icons

Let’s add import "bootstrap-icons/font/bootstrap-icons.css" to src\main.js file

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap"
import "bootstrap-icons/font/bootstrap-icons.css"
createApp(App).mount('#app')

For testing the Icon we can add an icon element in our app.vue page, and you can get the list of icons from the official Bootstrap Icons website

<template>
 <div>
  <button type="button" class="btn btn-primary">Primary  <i class="bi bi-usb-symbol"></i> </button>
   <button type="button" class="btn btn-secondary">Secondary  <i class="bi bi-usb-symbol"></i></button>
   <div>
   
   </div>
 </div>
</template>

Now your app is ready to use bootstrap 5, I hope that was a piece of useful information, thank you.