How to install or configure vue-bootstrap in VueJS?

Hi Friends 👋,

Welcome To SortoutCode! ❤️

To install the vue-bootstrap in the VueJS project, we are using the command and installing the vue.js project after that we are installing the vue-bootstrap.

Today I am going to show you How do you install or configure vue-bootstrap in VueJS.

Table of contains

  • Install the node
  • Install Vue globally
  • Create a Vue project
  • Run the Vue project
  • Install the Bootstrap and BootstrapVue
  • Register the BootstrapVue

Let’s start today’s tutorial How do I install or configure vue-bootstrap in VueJS?

Step 1: Install the node

For installing the node.js, go to node.js official website and download the current version of node.

Node.js is, allows developers to write JavaScript code that runs directly in a computer process itself instead of in a browser.

You can download the node.js application from the official website Node. js

vue, node

After the download is complete, install the node application in your system.

Step 2: Install Vue.js globally

Using this command you can install the Vue.js framework globally in your system

npm install -g @vue/cli

You can install vue using ‘npm’.

In this article, I am installing the project using the npm install -g @vue/cli.

You can verify that it is properly installed by simply running vue, which should present you with a help message listing all available commands.

For example, you can run this vue --version command to know your vue/cli version.

vue, vue/cli

Step 3. Create Vue js project

To create a new project run this command:

vue create sortoutcode

sortoutcode is our project name.

It will give you the option to select, which version you want to install Vue 2 or Vue 3 or perhaps choose the Manually select feature option, in this article I’m using Vue 2

vue, vue/cli

Step 4: Run the Vue project

Open the Command prompt Go to your project directory and run this command npm run serve.

After running this command npm run serve server is started. Now go to Browser, and run the localhost http://localhost:8080/ to open your project running.

vue, vue/cli

Step 5: Install the Bootstrap and BootstrapVue

We are going to install Bootstrap v4 and BootstrapVue in our VueJS project. For that, we can use the npm or yarn to install the Bootstrap v4 and BootstrapVue.In this tutorial, we are using the npm.

// With npm use this command
npm install vue bootstrap bootstrap-vue


// With yarn use this command
yarn add vue bootstrap bootstrap-vue

After the installation is complete.we need to initialize or register the BootstrapVue

Step:6 Register the BootstrapVue

After the installation is completed we are going to initialize or register the BootstrapVue in your app entry point which would be the app.js or main.js. For initialization, we are using the main.js entry point.

main.js

import Vue from 'vue'
import App from './App.vue'

import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)
Vue.use(IconsPlugin)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

To, Check if BootstrapVue is installed or not perfectly. we are printing some text in App.js.

App.js

<template>
  <div id="app">
    <p>Hi Friends Welcome To SortoutCode!</p>
  </div>
</template>

<script>
export default {
  name: "App",
};
</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>

As you can see in the above code, I Removed the unwanted text, link, heading, and image from the App.js. Press Ctrl + U to view the web page source. You can see that the CSS style BootstrapVue Custom CSS (https://bootstrap-vue.org).

For now, let’s check the output.

Output

Install BootstrapVue

All the best 👍.

Follow me on Twitter