Instalar Bootstrap 4.6 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 4.6 a nuestro proyecto en Vue.js.
Lo primero que debes hacer es agregar Bootstrap.
npm i --save bootstrap@^4.6
Si acabas de crear tu applicación en Vue.js no deberás hacer nada más. Bootstrap 4.6 tiene dependencias como jQuery y Popper que serán automáticamente instaladas con bootstrap. Para verificar esto puedes utilizar los siguientes comandos.
user@server$ npm list --depth=1 | grep jquery
│ ├── jquery@3.6.0
user@server$ npm list --depth=1 | grep popper
│ └── popper.js@1.16.1
O bien
user@server$ npm list jquery
my-project@0.1.0 /path/my-project
└─┬ bootstrap@4.6.0
└── jquery@3.6.0
user@server$ npm list popper.js
my-project@0.1.0 /path/my-project
└─┬ bootstrap@4.6.0
└── popper.js@1.16.1
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!.