Instalar Bootstrap en proyectos Vue.js

Author
By Darío Rivera
Posted on 2020-10-10 in Vue.js

En un post anterior vimos la estructura o Scaffolding de aplicación en Vue.js. Sin embargo, incialmente requieres instalar alguna librería de CSS como boostrap, Bulma, Semantic UI, etc. El día de hoy, veremos cómo agregar Bootstrap a nuestro proyecto en Vue.js.

Lo primero que debes hacer es agregar Bootstrap y Popper al proyecto.

npm i --save bootstrap
npm i --save jquery popper.js

Después de esto basta simplemente importar bootstrap de la siguiente manera en el archivo main.js.

import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

si recién creaste tu proyecto en Vue tu archivo main.js lucirá muy similar al sighuiente.

import Vue from "vue";
import App from "./App.vue";
import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App),
}).$mount("#app");

Una vez hecho esto ya podrás empezar a utilizar bootstrap en tus componentes. Hasta la próxima!.


Si te ha gustado este artículo puedes invitarme a tomar una taza de café

Acerca de Darío Rivera

Author

Ingeniero de desarrollo en PlacetoPay , Medellín. Darío ha trabajado por más de 6 años en lenguajes de programación web especialmente en PHP. Creador del microframework DronePHP basado en Zend y Laravel.

Sólo aquellos que han alcanzado el éxito saben que siempre estuvo a un paso del momento en que pensaron renunciar.