how to install bootstrap 5 in vue 3

In this section we will install step by step vue 3 with bootstrap 5.


Setup Vue 3 Project

Create Vue 3 Project

vue create bootstrap-vue 

Then you need to choose vuejs 3 below option.

Vue CLI v4.5.15
? Please pick a preset: 
❯ s ([Vue 3] babel, router, eslint) 
 a ([Vue 3] babel, typescript, router, vuex, eslint) 
 Default ([Vue 2] babel, eslint) 
 Default (Vue 3) ([Vue 3] babel, eslint) 
 Manually select features 

Next, move to project directory and run server.

cd bootstrap-vue
npm run serve


Install bootstrap 5 in vue 3

Run below command to install bootstrap 5.

npm install bootstrap

For Yarn

yarn add bootstrap

install popperjs

npm i @popperjs/core


Import bootstrap 5 in main.js

Next, you need to import bootstrap css and js in main.js for global use.

/src/main.js

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

createApp(App).use(router).mount("#app");

import "bootstrap/dist/js/bootstrap.js"


You can edit HelloWorld.vue or you can leave as it.

/src/components/HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
};
</script>

Next, put bootstrap 5 button class and check it working.

/src/views/Home.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Install Vue 3 with Bootstrap 5" />
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-light">Light</button>
    <button type="button" class="btn btn-dark">Dark</button>

    <button type="button" class="btn btn-link">Link</button>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue';

export default {
  name: 'Home',
  components: {
    HelloWorld,
  },
};
</script>
Install vue 3 with bootstrap 5

Install vue 3 with bootstrap 5

npm run serve


Read Also

Vue 3 Dark Mode with Tailwind CSS Example

Install Vite + Vue 3 + Typescript + Tailwind CSS 3

How to Install Tailwind CSS in Vue 3

How to install Bootstrap 5 in Vue 3

Vue 3 Responsive Navbar Menu With Tailwind CSS Example

Vue 3 Dropdown With Tailwind CSS Examples

Tailwind CSS Vue 3 Table Example

Tailwind CSS Vue 3 Modal Examples