vue3-bootstrap-vue

• Starting with Bootstrap-Vue step by step

• Compatibildad Vue 3 - Vite con Bootstrap-Vue, Font-Awesome, etc

• npm install -g @vue/cli

• vue create vue3-bootstrap-vue

  • Manually select features
    • Babel
    • Router
    • Linter / Formatter
  • Version: 3.x
  • Use history mode for router: No
  • Pick a linter / formatter config: ESLint + Prettier
  • Lint on save
  • Dedicated config files
  • Save as a preset: No

• cd vue3-bootstrap-vue

• npm run serve

  • http://localhost:8080/

• npm install --save bootstrap@4.3.1 bootstrap-vue @vue/compat

// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    config.resolve.alias.set('vue', '@vue/compat')

    config.module
      .rule('vue')
      .use('vue-loader')
      .tap((options) => {
        return {
          ...options,
          compilerOptions: {
            compatConfig: {
              MODE: 2
            }
          }
        }
      })
  }
}

// main.js
import Vue, { createApp } from "@vue/compat";
import App from "./App.vue";
import router from "./router";

/*--------------------REGISTER BOOTSTRAP---------------------------------*/
import { BootstrapVue, IconsPlugin } from "bootstrap-vue";
// Import Bootstrap an BootstrapVue CSS files (order is important)
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue);
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin);
/*-----------------------------------------------------------------------*/

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