Getting Started ​

Why BootstrapVueNext? ​

BootstrapVueNext is an attempt to have the BootstrapVue components in Vue3, Bootstrap 5, and typescript. Another goal is to have the components written in a simple and readable way for a better developer experience.

Migrating from BootstrapVue ​

If you are migrating from BootstrapVue, please refer to our migration guide

Contribute and Support 🙌 ​

This project is in the late stages of alpha version. While most features are functioning as expected, you may still encounter some issues. Your contributions at this stage can be particularly impactful in shaping the final product. If you're interested in contributing, here's how you can help:

• submit an issue
• or better, a pull request

Read our Contribution Guide on how to start helping.

Install ​

Installation - Vue.js ​

• First install the package

pnpm add bootstrap bootstrap-vue-next

bun add bootstrap bootstrap-vue-next

yarn add bootstrap bootstrap-vue-next

npm i bootstrap bootstrap-vue-next

Setup ​

Bootstrap-vue-next requires one of the following setup methods for the library to function properly. The new BApp component approach is recommended for new projects, while the plugin approach is still supported for backward compatibility. Both approaches work for application mounting and unit testing.

BApp Component (Recommended) ​

The modern way to setup bootstrap-vue-next using the BApp component:

See the BApp component documentation for complete configuration options.

<!-- App.vue -->
<template>
  <BApp>
    <!-- Your application content -->
    <router-view />
  </BApp>
</template>

<script setup lang="ts">
import {BApp} from 'bootstrap-vue-next'
</script>

// main.ts
import {createApp} from 'vue'
import App from './App.vue'

// Add the necessary CSS
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-next/dist/bootstrap-vue-next.css'

const app = createApp(App)
app.mount('#app')

Plugin Approach (Legacy) ​

The traditional plugin-based setup is still supported:

// main.js/ts
import {createApp} from 'vue'
import {createBootstrap} from 'bootstrap-vue-next/plugins/createBootstrap'

// Add the necessary CSS
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-next/dist/bootstrap-vue-next.css'

const app = createApp(App)
app.use(createBootstrap()) // Important
app.mount('#app')

Now, you can begin importing and using components

Automatic Registering of Components ​

To have components automatically registered and tree-shaken, we recommend unplugin-vue-components. Read their docs for additional details. We supply a resolver

pnpm add unplugin-vue-components -D

bun add unplugin-vue-components -D

yarn add unplugin-vue-components -D

npm i unplugin-vue-components -D

The following is an example of a basic vite.config.js/ts. All you need to do is add Components to the Vite plugins option, with the additional imports:

// vite.config.js/ts
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import {BootstrapVueNextResolver} from 'bootstrap-vue-next/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [BootstrapVueNextResolver()],
    }),
  ],
})

Aliasing ​

With the BootstrapVueNextResolver we also have an option for aliasing components like so:

import {Components} from 'unplugin-vue-components'
import {BootstrapVueNextResolver} from 'bootstrap-vue-next/resolvers'

Components({
  resolvers: [
    BootstrapVueNextResolver({
      aliases: {
        BInput: 'BFormInput',
      },
    }),
  ],
})

Installation - Nuxt.js 3 ​

In your Nuxt3 application, install the necessary packages for bootstrap-vue-next.

pnpm add bootstrap bootstrap-vue-next @bootstrap-vue-next/nuxt

bun add bootstrap bootstrap-vue-next @bootstrap-vue-next/nuxt

yarn add bootstrap bootstrap-vue-next @bootstrap-vue-next/nuxt

npm i bootstrap bootstrap-vue-next @bootstrap-vue-next/nuxt

Open your nuxt.config.js/ts file and configure your application to use bootstrap-vue-next. The components will be imported automatically as needed.

// nuxt.config.js/ts
export default defineNuxtConfig({
  modules: ['@bootstrap-vue-next/nuxt'],
  css: ['bootstrap/dist/css/bootstrap.min.css'],
})

Enjoy it in your app without manual imports, and automatic tree-shaking.

<template>
  <div>
    <BButton variant="primary" @click="show = !show">Click me</BButton>
    <BModal v-model="show">Test</BModal>
  </div>
</template>

<script setup lang="ts">
const show = ref(false)
</script>

You can customize the options with the bootstrapVueNext key in your nuxt.config.

// nuxt.config.js/ts
export default defineNuxtConfig({
  modules: ['@bootstrap-vue-next/nuxt'],
  bootstrapVueNext: {
    composables: true, // Will include all composables
    // composables: {useBreadcrumb: true, useColorMode: true, all: false}, // Will include only useBreadcrumb & useColorMode
    // composables: {useBreadcrumb: false, useColorMode: false, all: true} // Will include everything except useBreadcrumb & useColorMode
    directives: {all: true}, // Will include all directives
    css: true, // Will include the module's CSS. If set to false, you can add the CSS manually in the 'css' property below
  },
  css: [
    // 'bootstrap/dist/css/bootstrap.min.css' // Not necessary if `css: true`
  ],
})

This is mainly for the purpose of naming conflicts with other imports. It should not affect tree-shaking

Installation - TypeScript ​

This package uses optional peer dependencies to generate type definitions for enhanced functionality. These dependencies are not installed by default to avoid unnecessary bloat in projects that don't require these features. However, if you want full type support, you need to manually install the required packages.

pnpm add @floating-ui/vue @vueuse/core vue-router

bun add @floating-ui/vue @vueuse/core vue-router

yarn add @floating-ui/vue @vueuse/core vue-router

npm i @floating-ui/vue @vueuse/core vue-router

Installation - CDN ​

BootstrapVueNext is available through jsdelivr. You can add the package by using the following

<script src="https://cdn.jsdelivr.net/npm/bootstrap-vue-next@{{version}}/dist/bootstrap-vue-next.umd.min.js"></script>
<link
  href="https://cdn.jsdelivr.net/npm/bootstrap-vue-next@{{version}}/dist/bootstrap-vue-next.min.css"
  rel="stylesheet"
/>

• NOTE Do not forget to set the version!

Alternatively the ESM package is available as well

<script type="module">
  import bootstrapVueNext from 'https://cdn.jsdelivr.net/npm/bootstrap-vue-next@{{version}}/+esm'
</script>

Tree-shaking ​

If you are concerned about the size of your application, you should utilize tree-shaking. Below are some pointers on optimizing tree-shaking in the context of BootstrapVueNext.

Tree-shake CSS ​

If you are using one of the preferred installation methods, JS will be tree-shaken by default. The one thing we are not able to do automatically is optimize CSS. Methods like PurgeCSS are not ideal because of a limitation with the dynamic nature of class renderings and Vue (Problematic code like: [btn-${props.variant}]: props.variant !== undefined). With that being said, BootstrapVueNext does not handle CSS imports from Bootstrap, we only add some additional CSS ourselves. So, using a method such as Lean Sass Imports from the Bootstrap documentation is likely the best way to achieve the tiniest possible application size. Though it is not automatic, it should prove the safest bet for minifying your application.

Tree-shaking with BApp ​

When using the BApp component approach, you automatically get optimal tree-shaking as only the components and composables you actually use are included in your bundle.

When using the plugin approach, createBootstrap is a utility that provides everything required for the library to work. However, some plugins may not be needed and can be individually imported. All plugins are appended with Plugin (registryPlugin, orchestratorPlugin, etc.), so you can select only what is needed.

The createBootstrap plugin is approximately ~20kb gzipped, with orchestrator functionality accounting for the majority. Use individual plugin imports if you want the tiniest possible bundle size.

Exposed methods and tree-shaking ​

In order to correctly type exposed methods, you need to explicitly import them from BootstrapVueNext. When doing this, import the component (not just the type) and use the full path to improve tree-shaking.

<script setup lang="ts">
import {BTab} from 'bootstrap-vue-next/components/BTabs'
</script>

Comparison with BootstrapVue ​

BootstrapVue is the parent project for which this is based on. We consider BootstrapVue as the best implementation of Bootstrap v4. We strive for a full compatibility list for BootstrapVue. However, due to the nature of the rewrite, some features may be missing or changed. If anyone has spotted a missing compatibility feature, we request that you submit a GitHub issue or contribute to the parity report.

If you are migrating from BootstrapVue, please refer to our migration guide