Instalar Bootstrap 5 en proyectos 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!.