If you have not installed it yet, type the command given below to install Vue.js globally on your Operating system:
$ npm install -g @vue/cli
After successfully installing Vue.js globally on your Operating system, create the Vue project by typing the “vue create” command given below, followed by the project name:
$ vue create vue-project-name
It will ask you to either select the preset or select your own custom preset for the Vue project.
After configuring or selecting the default preset, the Vue project will be created in a while.
After creating the Vue project, navigate to the newly created project’s directory using the “cd” command.
At this stage, you have successfully set up the Vue project.
Once your system is ready, and the Vue project is set up! You can install the “bootstrap-vue” using the Yarn or NPM. If you want to install the simple “bootstrap” for styling purposes, you can type the command given below to install them.
For installing ‘bootstrap-vue’ and ‘bootstrap’ using the Yarn package manager, type the command given below:
$ yarn add bootstrap bootstrap-vue
For installing ‘bootstrap-vue’ and ‘bootstrap’ using the NPM package manager, type the command given below:
$ npm install bootstrap bootstrap-vue –save
Alright! Once the ‘bootstrap’ and ‘bootstrap-vue’ are installed, You have to enable them in the main.js file.
After enabling the “bootstrap” and “bootstrap-vue”, you can now use them in your Vue project.
How to Use Bootstrap in Vue
To use Bootstrap with Vue, ‘bootstrap-vue’ provides various components to use as a Vue component. For example, a button can be created using the ‘bootstrap-vue’ like this.
For knowing about further components, feel free to visit the official documentation page of BootstrapVue.
This is how simple it is to install and start using bootstrap in a Vue project.
Bootstrap is a prevalent CSS front-end library used for building mobile-first and responsive web apps, and with the help of BootstrapVue, we can build such web applications using Vue. In this post, we walk through the installation of BootstrapVue in a Vue.js project and also see how to enable it and use it. With the combination of such two robust libraries, we can speed up the development process and beautify our web application to the highest limits.