How to use Bootstrap with Vue.js

Among the frameworks that work with JavaScript, Vue.Js is one of the most preferred by developers. According to the definition given on its official website, it is a "progressive framework for creating user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused only on the view layer and is easy to pick up and integrate with other libraries or existing projects".

When combined with another framework, such as Bootstrap, it can be the ideal solution for the creation of our application or website. Bootstrap, as defined on its website, is “the world's most popular open-source front-end toolkit, featuring Sass variables and mixins, a responsive grid system, extensive prebuilt components, and powerful plugins.”

How to install Bootstrap

Before installing Bootstrap, you must first have a Vue project created, if you don't have it ready yet, you can create it by entering the command “Vue create” followed by the project name, like this:

$ vue create vue-project-name

It will ask you to select the preset or create your own. After you choose the one that suits you best, the Vue project will be created.

After this, we can now install the “Bootstrap-vue” using Yarn or NPM. If you want to install "bootstrap-vue" and "Bootstrap" using the Yarn package manager, write the following code:

$ yarn add bootstrap bootstrap-vue

Or, if you want to install them using npm, write the code:

$ npm install bootstrap bootstrap-vue --save

Once both 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 them, you can now use them in your Vue project.

At Rootstack our team of experts is ready to welcome you. Be part of a family of developers, creating the technologies of the present and the future. If you are interested in knowing about our vacancies, click here and start growing as a professional in one of the most solid software companies in Latin America.

We recommend you on video