How to use Bootstrap 5 with the newly created Vue 3 CLI project

The Bootstrap framework allows us to create a good-looking and useful UI effectively. We are able to implement the bootstrap framework by using bootstrap-vue with Vue 2 though, we are facing the error message “Uncaught TypeError: Cannot read property ‘prototype’ of undefined” if we try to same way as Vue 2 with Vue 3. As a result, we cannot see the UI as well. But don’t worry about it, we can implement bootstrap with Vue 3 by using Bootstrap 5 directly. I will let you know how to use Bootstrap 5, using the button as a sample, with the newly created Vue 3 CLI project in this article.

Bootstrap 5 has been released in May 2021, and it’s the latest major version of that at this time.

Vue: v3.0.0
Vue CLI: v4.5.13
Bootstrap: v5.1.3

Prepare the Vue 3 CLI project

[ads]

First of all, create the Vue CLI project by using the following command.

vue vreate [project-name]

Since I will use Vue 3 Preview preset in this article, please select the following during the creation of the project.

? Please pick a preset: 
  Default ([Vue 2] babel, eslint) 
❯ Default (Vue 3) ([Vue 3] babel, eslint) 
  Manually select features

Install the Bootstrap 5

[ads]

Bootstrap 5 will be installed by using the following command

npm install --save bootstrap

Once Bootstrap 5 has been installed, the dependencies line will add to the package.json file as follows.

 "dependencies": {
   "bootstrap": "^5.1.0",
   "core-js": "^3.6.5",
   "vue": "^3.0.0"
 },

Now the preparation task has been completed. Next, I will implement the Bootstrap Button of Bootstrap 5.

Implement the Bootstrap Button into Vue CLI project

[ads]

I will try to explain how to implement the bootstrap button simply as possible as I can. So only you need to modify the following files from CLI project creation initially.

BootstrapTest.vue (newly create the file to implement the button)
App.vue
main.js

BootstrapTest.vue

Save the following content in the location of [src[ – [components]. “type” and “class” have specified with Bootstrap one.

<template>
 <div>
   Bootstrap Test
   <br>
   <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>
 </div>
</template>

App.vue

App.vue needs to modify that this file import BootstrapTest.vue which is created as the previous step.

<template>
 <div>
   <BootstrapTest />
 </div>
</template>

<script>
import BootstrapTest from './components/BootstrapTest.vue'
 
export default {
 name: 'App',
 components: {
   BootstrapTest
 }
}
</script>

main.js

If you execute “npm run serve” at this moment, you will find the following UI that is before enabling Bootstrap 5.

You need the following line highlighted to apply Bootstrap 5.

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

Now you can see the following UI that is after enabling Bootstrap 5 with the above modification.

Wrapup

[ads]

Note that the following for implementing vue 3 cli with bootstrap.

Vue 3 can not use vue-bootstrap to utilize Bootstrap
Bootstrap 5 can be used in Vue 3
Need to import bootstrap.min.css in main.js

References

Introduction

Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDeliv...

Vue.js

Vue.js - The Progressive JavaScript Framework

[ads]

Sample code created in this article

main.js

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

App.vue

<template>
 <div>
   <BootstrapTest />
 </div>
</template>

<script>
import BootstrapTest from './components/BootstrapTest.vue'
 
export default {
 name: 'App',
 components: {
   BootstrapTest
 }
}
</script>

<style>
#app {
 font-family: Avenir, Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

BootstrapTest.vue

<template>
 <div>
   Bootstrap Test
   <br>
   <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>
 </div>
</template>

[ads]