In this tutorial, we are going to learn about how to add a bootstrap CSS library to the vue app which is created using vue cli.
- Open, your terminal and navigate to the vue project folder
- Run the following command in your terminal to install the bootstrap and its dependencies.
npm i bootstrap jquery popper.js
- Open the vue project in your favorite code editor.
- Navigate to the
main.jsfile and the below imports.
import Vue from "vue"; import App from "./App.vue"; import "bootstrap/dist/css/bootstrap.min.css";import "bootstrap/dist/js/bootstrap.min.js";
Now, we can use the bootstrap css classes inside our vue components like this.
<template> <div id="app"> <div class="alert alert-primary" role="alert"> A simple primary alert—check it out! </div> <div class="alert alert-secondary" role="alert"> A simple secondary alert—check it out! </div> </div> </template>