{"id":10584,"library":"bootstrap-vue-next","title":"BootstrapVueNext","description":"BootstrapVueNext is a comprehensive UI component library that seamlessly integrates Vue 3, Bootstrap 5, and TypeScript, offering a robust foundation for modern, type-safe web application development. It provides a rich and accessible set of pre-built components that mirror Bootstrap's styling and functionality, while leveraging Vue 3's composition API and reactivity system. The library is under active development, with its current stable version being 0.44.5 (as of April 2026), and exhibits a rapid release cadence, often seeing multiple updates within a month. Key differentiators include its full TypeScript support, commitment to accessibility (a11y), built-in server-side rendering (SSR) compatibility, and dedicated Nuxt 3 integration, making it a powerful choice for full-stack Vue ecosystems. It serves as a modern successor to older BootstrapVue iterations, aligning with the latest advancements in Vue and Bootstrap.","status":"active","version":"0.44.5","language":"javascript","source_language":"en","source_url":"https://github.com/bootstrap-vue-next/bootstrap-vue-next","tags":["javascript","bootstrap-vue-next","bootstrap-vue-3","bootstrap","vue","nuxt","typescript","components","a11y"],"install":[{"cmd":"npm install bootstrap-vue-next","lang":"bash","label":"npm"},{"cmd":"yarn add bootstrap-vue-next","lang":"bash","label":"yarn"},{"cmd":"pnpm add bootstrap-vue-next","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Provides the underlying CSS and JavaScript framework for Bootstrap 5 styling and functionality.","package":"bootstrap","optional":false},{"reason":"The core JavaScript framework that BootstrapVueNext components are built upon.","package":"vue","optional":false},{"reason":"Used for precise positioning of UI elements like dropdowns, tooltips, and popovers, adhering to WAI-ARIA authoring practices.","package":"@floating-ui/vue","optional":true},{"reason":"Provides robust date and time internationalization capabilities, likely for date picker or calendar components.","package":"@internationalized/date","optional":true},{"reason":"A collection of essential Vue Composition API utility functions, used for various reactive features.","package":"@vueuse/core","optional":true},{"reason":"Provides integrations for popular libraries with VueUse, potentially enhancing reactivity or component behaviors.","package":"@vueuse/integrations","optional":true},{"reason":"Essential for accessibility, managing keyboard focus within modal dialogs, offcanvas components, and other overlays.","package":"focus-trap","optional":true},{"reason":"An internal or closely related dependency, possibly providing foundational UI primitives or shared logic.","package":"reka-ui","optional":true},{"reason":"Potentially used for integrating with router-link components or managing navigation within applications.","package":"vue-router","optional":true}],"imports":[{"note":"This is typically used for global registration as a Vue plugin. For individual components, prefer named imports.","wrong":"const BootstrapVueNext = require('bootstrap-vue-next')","symbol":"BootstrapVueNext","correct":"import BootstrapVueNext from 'bootstrap-vue-next'"},{"note":"Individual components are tree-shakable named exports. Do not use direct path imports which might bypass optimizations.","wrong":"import BButton from 'bootstrap-vue-next/BButton'","symbol":"BButton","correct":"import { BButton } from 'bootstrap-vue-next'"},{"note":"Like other components, BModal is a named export from the main package. Ensure Bootstrap 5 CSS is also imported for styling.","wrong":"import { BModal } from 'bootstrap-vue-next/components'","symbol":"BModal","correct":"import { BModal } from 'bootstrap-vue-next'"},{"note":"The component 'BOtpInput' was renamed to 'BFormOtp' in version 0.44.5. Update imports accordingly to avoid breaking changes.","wrong":"import { BOtpInput } from 'bootstrap-vue-next'","symbol":"BFormOtp","correct":"import { BFormOtp } from 'bootstrap-vue-next'"},{"note":"Type imports are crucial for TypeScript projects, ensuring prop validation and type safety when using components.","symbol":"BTableProps","correct":"import type { BTableProps } from 'bootstrap-vue-next'"}],"quickstart":{"code":"import { createApp } from 'vue';\nimport BootstrapVueNext from 'bootstrap-vue-next';\nimport { BButton, BModal } from 'bootstrap-vue-next';\nimport 'bootstrap/dist/css/bootstrap.min.css';\nimport 'bootstrap-vue-next/dist/bootstrap-vue-next.css';\n\nconst app = createApp({\n  template: `\n    <div class=\"container mt-5\">\n      <h1>Welcome to BootstrapVueNext!</h1>\n      <BButton variant=\"primary\" @click=\"showModal = true\">Open Modal</BButton>\n\n      <BModal v-model=\"showModal\" title=\"Example Modal\" ok-only>\n        <p>This is a modal powered by BootstrapVueNext.</p>\n        <p>It integrates Bootstrap 5 styling and Vue 3 reactivity.</p>\n      </BModal>\n    </div>\n  `,\n  data() {\n    return {\n      showModal: false\n    };\n  },\n  components: {\n    BButton,\n    BModal\n  }\n});\n\napp.use(BootstrapVueNext);\napp.mount('#app');","lang":"typescript","description":"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."},"warnings":[{"fix":"Update all instances of `<BOtpInput>` to `<BFormOtp>` and adjust import statements from `import { BOtpInput }` to `import { BFormOtp }`.","message":"The 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.","severity":"breaking","affected_versions":">=0.44.5"},{"fix":"Wrap 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.","message":"When 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.","severity":"gotcha","affected_versions":"All versions, particularly prior to 0.44.1 for internal fixes"},{"fix":"Ensure 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.","message":"BootstrapVueNext 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.","severity":"gotcha","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Wrap browser-specific code in `onMounted` hook or use conditional checks like `if (typeof window !== 'undefined') { /* client-side code */ }`.","cause":"Attempting to access browser-specific global objects (like `window`, `document`, `localStorage`) during server-side rendering (SSR).","error":"ReferenceError: window is not defined"},{"fix":"Replace all instances of `<BOtpInput>` with `<BFormOtp>` and update your import statements from `import { BOtpInput }` to `import { BFormOtp }`.","cause":"Using the old component name `BOtpInput` after updating to `bootstrap-vue-next` version 0.44.5 or later.","error":"Component 'BOtpInput' is not found. Did you register it properly?"},{"fix":"Ensure 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.","cause":"Attempting to use ESM `import` syntax in a CommonJS (CJS) environment without proper transpilation or module configuration.","error":"Uncaught SyntaxError: Cannot use import statement outside a module"}],"ecosystem":"npm"}