Introduction ​

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.

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

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

// 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. This is in addition to the above installation steps. We supply a resolver

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'

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'

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

Installation - Nuxt.js 3 ​

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

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`
  ],
})

The practical difference between manually including an item and not is null as Nuxt should tree-shake out anything that is not used in the final build.

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-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-shake JS plugins ​

createBootstrap is a simple utility that provides everything that is required for the library to work. However, some plugins may not be needed. One could individually import each needed plugin, they are all appended with Plugin (toastPlugin, breadcrumbPlugin, etc). So, one could pick and choose what is needed Practically the createBootstrap plugin is ~20kb gzipped with toast and modalController accounting for the majority. Use this if you really want the tiniest possible size.

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.