Instalar Bootstrap 5 en proyectos Vue.js

Author
Por Darío Rivera
Publicado el en 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

Application Architect at Elentra Corp . Quality developer and passionate learner with 10+ years of experience in web technologies. Creator of EasyHttp , an standard way to consume HTTP Clients.

LinkedIn Twitter Instagram

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