How to Use Bootstrap in Your Vue.js Apps
In this post we will give you information about How to Use Bootstrap in Your Vue.js Apps. Hear we will give you detail about How to Use Bootstrap in Your Vue.js Apps And how to use it also give you demo for it if it is necessary.
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:
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-.
<template> <b-container> <p>Hello, Bootstrap-Vue</p> </b-container> </template>
Now, Serve App:
npm run serve