Registry / web-framework / vue-cli-plugin-bootstrap-vue

vue-cli-plugin-bootstrap-vue

library0.8.2jsnpmunverified

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.

web-framework

npm install vue-cli-plugin-bootstrap-vue

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-CLI-PLUGIN-BOO

vue-cli-plugin-bootstrap-vue

web-frameworkjavascriptv0.8.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

BootstrapVue (global registration)

✓ import Vue from 'vue'; import BootstrapVue from 'bootstrap-vue'; import 'bootstrap-vue/dist/bootstrap-vue.css'; // Or SCSS equivalent Vue.use(BootstrapVue);

✗ const BootstrapVue = require('bootstrap-vue');

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.

Individual BootstrapVue components (e.g., BButton, BModal)

✓ import { BButton, BModal } from 'bootstrap-vue'; // Use in component options: components: { BButton, BModal }

✗ import BButton from 'bootstrap-vue/es/components/button';

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'.

Individual BootstrapVue directives (e.g., VBTooltip)

✓ import { VBTooltip } from 'bootstrap-vue'; // Use in component options: directives: { 'b-tooltip': VBTooltip }

✗ import VBTooltip from 'bootstrap-vue/es/directives/tooltip';

Similar to components, individual directives can be imported via named exports for better modularity and bundle efficiency.

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.

# 1. Ensure Vue CLI is installed globally npm install -g @vue/cli # or yarn global add @vue/cli # 2. Create a new Vue project vue create my-bootstrap-app # Select preferred features (e.g., TypeScript, Router, Vuex). cd my-bootstrap-app # 3. Add the BootstrapVue plugin # This command will prompt you for configuration choices # (e.g., using SCSS, injecting abstract styles, component vs. full import). vue add bootstrap-vue # 4. Start the development server npm run serve # Example usage in a component (e.g., src/components/HelloWorld.vue): /* <template> <div> <b-button variant="primary" @click="showAlert">Click Me</b-button> <b-alert v-model="show" class="mt-3" dismissible fade> Hello from <b>BootstrapVue</b>! This is a simple alert. </b-alert> </div> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; export default defineComponent({ name: 'BootstrapExample', setup() { const show = ref(false); const showAlert = () => { show.value = true; setTimeout(() => { show.value = false; }, 3000); }; return { show, showAlert }; }, }); </script> */

Debug

Known issues

breakingVersion `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.

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.

affects: >=0.6.0

gotchaThe `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.

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.

affects: >=0.1.0

deprecatedUsing 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.

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`.

affects: <=0.4.0

gotchaWhen 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.

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).

affects: >=0.8.0

Errors

Common errors & fixes

Module build failed (from ./node_modules/sass-loader/dist/cjs.js): Error: Missing binding /path/to/node_modules/node-sass/lib/binding.node

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.

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`).

[vue-cli-plugin-bootstrap-vue] Error: Cannot find module 'bootstrap-vue' (or similar 'module not found' for bootstrap/bootstrap-vue)

`bootstrap-vue` or `bootstrap` was not properly installed, or its version is incompatible with the plugin's expectations.

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`).

ERROR in ./src/main.js Module not found: Error: Can't resolve 'bootstrap-vue/dist/bootstrap-vue.css'

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.

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).

Upgrade

Version history

0.8.2latest on npm

Audit

Dependencies

bootstrap-vuerequiredThe core UI library that this plugin integrates into Vue projects.

bootstraprequiredThe underlying CSS framework that BootstrapVue builds upon for styling.

@vue/clirequiredThe command-line interface tool that this plugin extends for project scaffolding and management.

Agent activity

5 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/GregYankovoy/vue-cli-plugin-bootstrap-vue ↗

packagehttps://www.npmjs.com/package/vue-cli-plugin-bootstrap-vue ↗