Introduction​

Why BootstrapVueNext?​

BootstrapVueNext is an attempt to have theBootstrapVue 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 ourmigration guide

Contribute and Support 🙌​

This project is in thelate 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 anissue
• or better, apull request

Read ourContribution 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 offers two ways to configure your application. The newBApp component approach is recommended for new projects, while the plugin approach is still supported for backward compatibility.

BApp Component (Recommended)​

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

See theBApp 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.tsimport {createApp}from 'vue'import Appfrom './App.vue'// Add the necessary CSSimport '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/tsimport {createApp}from 'vue'import {createBootstrap}from 'bootstrap-vue-next/plugins/createBootstrap'// Add the necessary CSSimport 'bootstrap/dist/css/bootstrap.css'import 'bootstrap-vue-next/dist/bootstrap-vue-next.css'const app = createApp(App)app.use(createBootstrap())// Importantapp.mount('#app')

And you must put BOrchestrator in your app:

<!-- App.vue --><template>  <BOrchestrator />  <router-view /></template><script setup lang="ts">import {BOrchestrator}from 'bootstrap-vue-next'</script>

Now, you can begin importing and using components

Automatic Registering of Components​

To have components automatically registeredand tree-shaken, we recommendunplugin-vue-components. Read their docs for additional details. This is in addition to the above installation steps. 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 basicvite.config.js/ts. All you need to do is addComponents to the Viteplugins option, with the additional imports:

// vite.config.js/tsimport {defineConfig}from 'vite'import vuefrom '@vitejs/plugin-vue'import Componentsfrom 'unplugin-vue-components/vite'import {BootstrapVueNextResolver}from 'bootstrap-vue-next/resolvers'export default defineConfig({  plugins: [    vue(),    Components({      resolvers: [BootstrapVueNextResolver()],    }),  ],})

Aliasing​

With theBootstrapVueNextResolver 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 forbootstrap-vue-next.

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

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

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

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

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

// nuxt.config.js/tsexport 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/tsexport 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 -D @floating-ui/vue @vueuse/core vue-router

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

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

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

Installation - CDN​

BootstrapVueNext is available throughjsdelivr. 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 bootstrapVueNextfrom '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 utilizetree-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 asLean 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 theBApp component approach, you automatically get optimal tree-shaking as only the components and composables you actually use are included in your bundle.

When using theplugin 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 withPlugin (registryPlugin,orchestratorPlugin, etc.), so you can select only what is needed.

ThecreateBootstrap 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 Bootstrapv4. 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 theparity report.

If you are migrating from BootstrapVue, please refer to ourmigration guide