{"id":14269,"library":"vue-cli-plugin-bootstrap-vue","title":"BootstrapVue Plugin for Vue CLI","description":"The `vue-cli-plugin-bootstrap-vue` package serves as a `vue-cli` plugin to simplify the integration of BootstrapVue into new or existing Vue CLI projects. It automates the scaffolding and configuration process, including the installation of `bootstrap-vue` and its CSS framework `bootstrap`, and modifies project files such as `main.js` and `vue.config.js` to enable BootstrapVue functionality. The current stable version is 0.8.2, with releases periodically addressing compatibility with newer versions of `@vue/cli`, `BootstrapVue`, and underlying build tools like Sass loaders. Its primary differentiator is providing a rapid setup for BootstrapVue, handling common configuration challenges like SCSS integration, and managing dependency updates to ensure a smooth developer experience.","status":"active","version":"0.8.2","language":"javascript","source_language":"en","source_url":"https://github.com/GregYankovoy/vue-cli-plugin-bootstrap-vue","tags":["javascript","bootstrap-vue","bootstrap vue","BootstrapVue","vue bootstrap","bootstrap","bootstrap v4","bootstrap 4","plugin"],"install":[{"cmd":"npm install vue-cli-plugin-bootstrap-vue","lang":"bash","label":"npm"},{"cmd":"yarn add vue-cli-plugin-bootstrap-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-cli-plugin-bootstrap-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"The core UI library that this plugin integrates into Vue projects.","package":"bootstrap-vue","optional":false},{"reason":"The underlying CSS framework that BootstrapVue builds upon for styling.","package":"bootstrap","optional":false},{"reason":"The command-line interface tool that this plugin extends for project scaffolding and management.","package":"@vue/cli","optional":false}],"imports":[{"note":"This pattern globally registers all BootstrapVue components and directives. The plugin often generates this boilerplate in `main.js` for initial setup. While convenient, it can lead to larger bundle sizes.","wrong":"const BootstrapVue = require('bootstrap-vue');","symbol":"BootstrapVue (global registration)","correct":"import Vue from 'vue';\nimport BootstrapVue from 'bootstrap-vue';\nimport 'bootstrap-vue/dist/bootstrap-vue.css'; // Or SCSS equivalent\n\nVue.use(BootstrapVue);"},{"note":"Importing individual components via named exports is the recommended approach for optimal tree-shaking, resulting in smaller production bundles. The plugin sets up aliases, allowing direct import from 'bootstrap-vue'.","wrong":"import BButton from 'bootstrap-vue/es/components/button';","symbol":"Individual BootstrapVue components (e.g., BButton, BModal)","correct":"import { BButton, BModal } from 'bootstrap-vue';\n// Use in component options: components: { BButton, BModal }"},{"note":"Similar to components, individual directives can be imported via named exports for better modularity and bundle efficiency.","wrong":"import VBTooltip from 'bootstrap-vue/es/directives/tooltip';","symbol":"Individual BootstrapVue directives (e.g., VBTooltip)","correct":"import { VBTooltip } from 'bootstrap-vue';\n// Use in component options: directives: { 'b-tooltip': VBTooltip }"}],"quickstart":{"code":"# 1. Ensure Vue CLI is installed globally\nnpm install -g @vue/cli # or yarn global add @vue/cli\n\n# 2. Create a new Vue project\nvue create my-bootstrap-app\n# Select preferred features (e.g., TypeScript, Router, Vuex).\n\ncd my-bootstrap-app\n\n# 3. Add the BootstrapVue plugin\n# This command will prompt you for configuration choices\n# (e.g., using SCSS, injecting abstract styles, component vs. full import).\nvue add bootstrap-vue\n\n# 4. Start the development server\nnpm run serve\n\n# Example usage in a component (e.g., src/components/HelloWorld.vue):\n/*\n<template>\n  <div>\n    <b-button variant=\"primary\" @click=\"showAlert\">Click Me</b-button>\n    <b-alert v-model=\"show\" class=\"mt-3\" dismissible fade>\n      Hello from <b>BootstrapVue</b>! This is a simple alert.\n    </b-alert>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, ref } from 'vue';\n\nexport default defineComponent({\n  name: 'BootstrapExample',\n  setup() {\n    const show = ref(false);\n    const showAlert = () => {\n      show.value = true;\n      setTimeout(() => { show.value = false; }, 3000);\n    };\n    return { show, showAlert };\n  },\n});\n</script>\n*/","lang":"typescript","description":"This quickstart demonstrates how to create a new Vue project, add the `vue-cli-plugin-bootstrap-vue` plugin, and run a basic example with a BootstrapVue button and alert."},"warnings":[{"fix":"Ensure `sass` (Dart Sass) is installed (`npm install sass` or `yarn add sass`) and `node-sass` is removed (`npm uninstall node-sass`). Update `sass-loader` to a compatible version (e.g., 8.x or newer). Review any custom Sass for compatibility with Dart Sass syntax.","message":"Version `0.6.0` transitioned from `node-sass` to `sass` (Dart Sass) and updated `sass-loader` to `8.0.0`. Projects with existing `node-sass` installations or older `sass-loader` configurations may encounter build failures or unexpected styling issues due to syntax differences or dependency conflicts.","severity":"breaking","affected_versions":">=0.6.0"},{"fix":"Always execute `git commit -am \"Pre-bootstrap-vue plugin install\"` or `git stash` immediately before invoking `vue add bootstrap-vue` to create a rollback point.","message":"The `README` strongly advises committing or stashing all changes before running `vue add bootstrap-vue`. The plugin modifies critical project files (e.g., `main.js`, `vue.config.js`), and this precaution is essential for easy reversion if any issues or conflicts arise.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Upgrade to the latest `vue-cli-plugin-bootstrap-vue` and ensure `bootstrap-vue` is also updated to a compatible modern version (e.g., `2.x`) in your `package.json`.","message":"Using older versions of `bootstrap-vue` (prior to `2.0.0`) with newer versions of the plugin can lead to compatibility issues. Plugin version `0.5.0` specifically updated its dependencies to `bootstrap-vue 2.0.4`, indicating a shift to modern `BootstrapVue` APIs.","severity":"deprecated","affected_versions":"<=0.4.0"},{"fix":"Verify that `sass` (Dart Sass) and `sass-loader` are correctly installed as devDependencies and properly configured in your project's `package.json` and Webpack configuration (typically handled by Vue CLI).","message":"When selecting the SCSS import option (available since `0.8.0`), it is crucial that your project has a correctly configured SCSS setup, including the `sass` package (Dart Sass) and `sass-loader`. Missing or misconfigured dependencies will result in compilation errors.","severity":"gotcha","affected_versions":">=0.8.0"}],"env_vars":null,"search_vec":"'0.8.2':71 '4':130 'address':75 'autom':35 'bootstrap':11,46,52,119,121,125,126,127,129 'bootstrap-vu':45,118 'bootstrapvu':1,26,64,82,99,123 'build':85 'challeng':103 'cli':5,9,19,32 'common':101 'compat':76 'configur':39,102 'css':50 'current':67 'depend':109 'develop':115 'differenti':92 'enabl':63 'ensur':112 'exist':30 'experi':116 'file':56 'framework':51 'function':65 'handl':100 'includ':41 'instal':43 'integr':24,106 'javascript':117 'like':87,104 'loader':89 'main.js':59 'manag':108 'modifi':54 'new':28 'newer':78 'packag':13 'period':74 'plugin':2,10,20,131 'primari':91 'process':40 'project':33,55 'provid':94 'rapid':96 'releas':73 'sass':88 'scaffold':37 'scss':105 'serv':14 'setup':97 'simplifi':22 'smooth':114 'stabl':68 'tool':86 'under':84 'updat':110 'v4':128 'version':69,79 'vue':4,8,12,18,31,47,120,122,124 'vue-c':17 'vue-cli-plugin-bootstrap-vu':7 'vue.config.js':61 'vue/cli':81","created_at":"2026-04-20T01:58:49.610237+00:00","updated_at":"2026-04-20T01:58:49.610237+00:00","problems":[{"fix":"The plugin moved to `sass` (Dart Sass) in `v0.6.0`. Remove `node-sass` (`npm uninstall node-sass`) and install `sass` (`npm install sass`). You might also need to rebuild dependencies (`npm rebuild`).","cause":"This error occurs when `node-sass` is present but a compatible binding for the current Node.js version is missing, or when `sass` (Dart Sass) is expected but `node-sass` causes a conflict.","error":"Module build failed (from ./node_modules/sass-loader/dist/cjs.js): Error: Missing binding /path/to/node_modules/node-sass/lib/binding.node"},{"fix":"Ensure `bootstrap-vue` and `bootstrap` are correctly listed in `package.json` and installed (`npm install` or `yarn install`). Try running `vue add bootstrap-vue` again, or manually install them (`npm install bootstrap-vue bootstrap`).","cause":"`bootstrap-vue` or `bootstrap` was not properly installed, or its version is incompatible with the plugin's expectations.","error":"[vue-cli-plugin-bootstrap-vue] Error: Cannot find module 'bootstrap-vue' (or similar 'module not found' for bootstrap/bootstrap-vue)"},{"fix":"Verify that `import 'bootstrap-vue/dist/bootstrap-vue.css';` (or the equivalent SCSS import if using SCSS) is present in your `main.js` or a primary style entry point. Ensure `css-loader` and `vue-style-loader` are correctly configured in your project's Webpack setup (usually handled by Vue CLI).","cause":"The CSS file for `bootstrap-vue` is not being found, likely due to a missing `import` statement, an incorrect path, or Webpack not being configured to handle CSS files.","error":"ERROR in ./src/main.js Module not found: Error: Can't resolve 'bootstrap-vue/dist/bootstrap-vue.css'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/GregYankovoy/vue-cli-plugin-bootstrap-vue","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vue-cli-plugin-bootstrap-vue","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}