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
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
BootstrapVueNext
✓ import BootstrapVueNext from 'bootstrap-vue-next'
✗ const BootstrapVueNext = require('bootstrap-vue-next')
This is typically used for global registration as a Vue plugin. For individual components, prefer named imports.
BButton
✓ import { BButton } from 'bootstrap-vue-next'
✗ import BButton from 'bootstrap-vue-next/BButton'
Individual components are tree-shakable named exports. Do not use direct path imports which might bypass optimizations.
BModal
✓ import { BModal } from 'bootstrap-vue-next'
✗ import { BModal } from 'bootstrap-vue-next/components'
Like other components, BModal is a named export from the main package. Ensure Bootstrap 5 CSS is also imported for styling.
BFormOtp
✓ import { BFormOtp } from 'bootstrap-vue-next'
✗ import { BOtpInput } from 'bootstrap-vue-next'
The component 'BOtpInput' was renamed to 'BFormOtp' in version 0.44.5. Update imports accordingly to avoid breaking changes.
BTableProps
✓ import type { BTableProps } from 'bootstrap-vue-next'
Type imports are crucial for TypeScript projects, ensuring prop validation and type safety when using components.
This quickstart demonstrates setting up a basic Vue 3 application with BootstrapVueNext, including global plugin registration, importing individual components like BButton and BModal, and ensuring the necessary Bootstrap 5 and BootstrapVueNext CSS is loaded. It provides a simple interactive modal example.
import { createApp } from 'vue';
import BootstrapVueNext from 'bootstrap-vue-next';
import { BButton, BModal } from 'bootstrap-vue-next';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap-vue-next/dist/bootstrap-vue-next.css';
const app = createApp({
template: `
<div class="container mt-5">
<h1>Welcome to BootstrapVueNext!</h1>
<BButton variant="primary" @click="showModal = true">Open Modal</BButton>
<BModal v-model="showModal" title="Example Modal" ok-only>
<p>This is a modal powered by BootstrapVueNext.</p>
<p>It integrates Bootstrap 5 styling and Vue 3 reactivity.</p>
</BModal>
</div>
`,
data() {
return {
showModal: false
};
},
components: {
BButton,
BModal
}
});
app.use(BootstrapVueNext);
app.mount('#app');
Debug
Known issues
breakingThe component `BOtpInput` was renamed to `BFormOtp` for consistency and clarity within the form components. Direct usage of `BOtpInput` will result in component not found errors.fixUpdate all instances of `<BOtpInput>` to `<BFormOtp>` and adjust import statements from `import { BOtpInput }` to `import { BFormOtp }`. affects: >=0.44.5
gotchaWhen developing with Server-Side Rendering (SSR), accessing browser-specific globals like `window` or `document` directly in component setup or module scope can lead to `ReferenceError: window is not defined` errors during the SSR build process.fixWrap any browser-specific code within `onMounted` lifecycle hooks or use environment-aware checks (e.g., `typeof window !== 'undefined'`) to ensure code only runs client-side. Version 0.44.1 included internal fixes to standardize access, but userland code must still be cautious.
affects: All versions, particularly prior to 0.44.1 for internal fixes
gotchaBootstrapVueNext relies on Bootstrap 5 CSS for its styling. Neglecting to import the Bootstrap 5 CSS file will result in unstyled components, even if the components are correctly rendered.fixEnsure you import `bootstrap/dist/css/bootstrap.min.css` in your main application entry file (e.g., `main.ts` or `main.js`), preferably before `bootstrap-vue-next/dist/bootstrap-vue-next.css` if also using the default theme.
affects: All versions
Errors
Common errors & fixes
ReferenceError: window is not defined
Attempting to access browser-specific global objects (like `window`, `document`, `localStorage`) during server-side rendering (SSR).
fixWrap browser-specific code in `onMounted` hook or use conditional checks like `if (typeof window !== 'undefined') { /* client-side code */ }`. Component 'BOtpInput' is not found. Did you register it properly?
Using the old component name `BOtpInput` after updating to `bootstrap-vue-next` version 0.44.5 or later.
fixReplace all instances of `<BOtpInput>` with `<BFormOtp>` and update your import statements from `import { BOtpInput }` to `import { BFormOtp }`. Uncaught SyntaxError: Cannot use import statement outside a module
Attempting to use ESM `import` syntax in a CommonJS (CJS) environment without proper transpilation or module configuration.
fixEnsure your project is configured for ESM (e.g., `"type": "module"` in `package.json` for Node.js, or using a bundler like Vite/Webpack that handles ESM). If stuck with CJS, you may need a build step or consider dynamically importing ESM modules if supported by your runtime.
Audit
Dependencies
bootstraprequiredProvides the underlying CSS and JavaScript framework for Bootstrap 5 styling and functionality.
vuerequiredThe core JavaScript framework that BootstrapVueNext components are built upon.
@floating-ui/vueoptionalUsed for precise positioning of UI elements like dropdowns, tooltips, and popovers, adhering to WAI-ARIA authoring practices.
@internationalized/dateoptionalProvides robust date and time internationalization capabilities, likely for date picker or calendar components.
@vueuse/coreoptionalA collection of essential Vue Composition API utility functions, used for various reactive features.
@vueuse/integrationsoptionalProvides integrations for popular libraries with VueUse, potentially enhancing reactivity or component behaviors.
focus-trapoptionalEssential for accessibility, managing keyboard focus within modal dialogs, offcanvas components, and other overlays.
reka-uioptionalAn internal or closely related dependency, possibly providing foundational UI primitives or shared logic.
vue-routeroptionalPotentially used for integrating with router-link components or managing navigation within applications.