How to Use Bootstrap in Your Vue.js Apps

  Suresh Ramani   Vue.js   8 months ago
How to Use Bootstrap in Your Vue.js Apps - TechvBlogs

Vue.js is a popular front-end framework for building Single Page Apps. It provides structure and abstraction. We can also create a server-side rendering application using Vue.js, It's help for SEO ( Search Engine Optimization ). Bootstrap is a free and Open Source CSS Framework. With Bootstrap we can create a responsive and mobile-friendly web application and it's very easy to design a web application.

The Bootstrap-Vue project has done most of the heavy lifting of replacing jQuery with Vue by implementing Bootstrap features as Vue components.

In this blog, we learn about using bootstrap-vue with vue.js.

Let's create a new Vue CLI Project:

vue create vue-bootstrap-app
Note: You will need to install Vue CLI Library in your development environment.

 Now, change into your new project directory:

cd vue-bootstrap-app

You can add the bootstrap-Vue plugin to your created project.

vue add bootstrap-vue

Now It's done bootstrapping your Vue application.

All Of the features of Bootstrap are available as globally registered components in Bootstrap-Vue. In Bootstrap-Vue, All components start with prefixed b-.

Example: src/App.vue

    <p>Hello, Bootstrap-Vue</p>

Now, Serve App:

npm run serve

How to Use Bootstrap in Your Vue.js AppsIf you have any queries or doubts about this topic please feel free to contact us. We will try to reach you.


Suresh Ramani - Author - TechvBlogs
Suresh Ramani
Laravel & Vue.js Developer
Advertise Here