37 C
Jaipur
Tuesday, April 13, 2021

How to Use Bootstrap with Vue.js – Linux Hint

Must read

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.

Install Bootstrap

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

OR

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.

import BootstrapVue from ‘bootstrap-vue/dist/bootstrap-vue.esm’;
import ‘bootstrap-vue/dist/bootstrap-vue.css’;
import ‘bootstrap/dist/css/bootstrap.css’;

Vue.use(BootstrapVue);

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.

<b-button variant=“success”>Button</b-button>

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.

Conclusion

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.



About the author


Shehroz Azam

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.






Source link

- Advertisement -

More articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest article