Instalar librerías

Una forma más fácil de instalar bootstrap vue y hacer la configuración de manera automática es usando su plugin para el CLI, basta con correr el siguiente comando:

vue add bootstrap

Con eso el mismo instala los paquetes de npm necesarios y hace la configuración en el main.js, si te pregunta algo sobre uncommited changes, has commit con git y luego corre el comando y escribes “y” esto sobreescribirá algunos componentes, así que solo es cuestión de volver a organizarlos

En mi caso, como estoy usando Vue3 no me funciona bootstrap-vue, estuve buscando y encontré 2 opciones, primevue y element.

Hola, para los que quieran implementar bootstrap en Vue3, deben instalar esta dependencia ya que la indicada solo funciona para vue2

npm i bootstrap-vue-3

Al momento de realizar la importación, se cambiaría el nombre a la librería instalada.

import BootstrapVue from 'bootstrap-vue-3'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'

Me había arrojado un error con la imagen, que no la encontraba. Estaba así

Antes

    <img alt="Vue logo" src="../assets/logo.png" />

Para arreglarlo aproveche el alias que se coloca por defecto al crearse el proyecto src/ -> @

    <img alt="Vue logo" :src="require('@/assets/logo.png')" />

Y se arregló

Como puedo saber cuales son las “reglas” de ESlint aplicadas, porque recientemente note que al NO colocar un espacio seguido de un comentario " //Comentario … // Comentario" Solamente por eso me da error al compilar.

Dejo la documentación de Bootstrap-Vue: https://bootstrap-vue.org/

Para los que esten empezando el curso 2022, les recomiendo hacerlo con VUE 2x e instalar todas las dependencias después de crear el proyecto. ejemplo

vue add eslint

vue add bootstrap

Se ahorraran muchos problemas al momento de comenzar el proyecto.
Yo despues de 1 hora intentando comenzar, la mejor solucion fue hacerlo manual todo. espero que les funcione!

Para organizarlo mejor, una vez instalado bootstrap-vue, dentro de la carpeta plugins, agregamos un archivo bootstrap-vue.js, agregamos:

import Vue from 'vue'

import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)

Y en el main.js solo agregamos:

import './plugins/bootstrap-vue'

Genial, el curso va muy bien, que interesante que sea de lectura y esta genial, grandes aportes de los compañeros

Puedo ser libre de usar otro como vuetify en vez de bootstrap?

Buen día. Tengo un problema. Cada vez que realizo un cambio debo reiniciar el serve. No se autorecarga?

tengo este error al iniciar el servidor

Ojo con esto:
npm config set legacy-peer-deps=true --location=project

Comandos para vue js 3

Instalar dependencias

npm install axios numeral --save 
npm i bootstrap-vue-3

Configuración del archivo main.js

import BootstrapVue from "bootstrap-vue-3";

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

//CSS Global
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue-3/dist/bootstrap-vue-3.css";

createApp(App).use(store).use(router).use(BootstrapVue).mount("#app");

Listo,

Genial prefiero Bootstrap aunque a la mayoria no les guste 😄