How to use Bootstrap with Vue.js

By lmartinez, 17 January, 2022
vuejs
Unsplash

 

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.”

 

vuejs

 

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


 

Thumbnail
Image
e-commerce
Weight
6
Hero
Title
How to use Bootstrap with Vue.js
Image
Image
Software Consulting Services
Text Color
White
Text Alignment
Left
Size
Medium
Overlay effect
Hide overlay effect
Date
Sidebar
CTA
Premium
No