BootstrapVueNext

Common errors

• ReferenceError: window is not defined

  cause Attempting to access browser-specific global objects (like `window`, `document`, `localStorage`) during server-side rendering (SSR).
  fix Wrap 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?

  cause Using the old component name `BOtpInput` after updating to `bootstrap-vue-next` version 0.44.5 or later.
  fix Replace 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

  cause Attempting to use ESM `import` syntax in a CommonJS (CJS) environment without proper transpilation or module configuration.
  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.

Warnings

• breaking 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.
  Fix: Update all instances of `<BOtpInput>` to `<BFormOtp>` and adjust import statements from `import { BOtpInput }` to `import { BFormOtp }`.
• gotcha 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.
  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.
• gotcha 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.
  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.

Install

• npm install bootstrap-vue-next npm
• yarn add bootstrap-vue-next yarn
• pnpm add bootstrap-vue-next pnpm

Imports

• BootstrapVueNext
  wrong:

  const BootstrapVueNext = require('bootstrap-vue-next')

  correct:

  import BootstrapVueNext from 'bootstrap-vue-next'

  This is typically used for global registration as a Vue plugin. For individual components, prefer named imports.
• BButton
  wrong:

  import BButton from 'bootstrap-vue-next/BButton'

  correct:

  import { BButton } from 'bootstrap-vue-next'

  Individual components are tree-shakable named exports. Do not use direct path imports which might bypass optimizations.
• BModal
  wrong:

  import { BModal } from 'bootstrap-vue-next/components'

  correct:

  import { BModal } from 'bootstrap-vue-next'

  Like other components, BModal is a named export from the main package. Ensure Bootstrap 5 CSS is also imported for styling.
• BFormOtp
  wrong:

  import { BOtpInput } from 'bootstrap-vue-next'

  correct:

  import { BFormOtp } 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.

Quickstart

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');