Instalar Bootstrap 5 en proyectos Vue.js

Author
By Darío Rivera
Posted on 2021-07-19 in Vue.js

En un post anterior vimos la estructura o Scaffolding de aplicación en Vue.js. Después de esto muy seguramente requerirás instalar alguna librería de CSS como boostrap, Bulma, Semantic UI, etc. El día de hoy, veremos cómo agregar Bootstrap 5.0 a nuestro proyecto en Vue.js.

Lo primero que debes hacer es agregar Bootstrap.

npm i --save bootstrap@^5.0

Si acabas de crear tu applicación en Vue.js no deberás hacer nada más. A diferencia de Bootstrap 4.6, la versión 5 de Bootstrap no utiliza popper.js ni jquery. En su lugar utiliza @popperjs/core la cual es instalada automáticamente. Para verificar esto puedes utilizar los siguientes comandos.

user@server$ npm list --depth=1 | grep popper
│ └── @popperjs/core@2.9.2

O bien

user@server$ npm list @popperjs/core
my-project@0.1.0 /path/my-project
└─┬ bootstrap@5.0.2
  └── @popperjs/core@2.9.2

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

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


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.