Introduction

Get started with BootstrapVue3 and Bootstrap v5, the world’s most popular framework for building responsive, mobile-first sites

NOT PRODUCTION READY

This project is still in alpha version. There is a lot of work to do, if you want to contribute you can use it and submit an issueopen in new window or even better, a pull requestopen in new window πŸ˜„.

Why BootstrapVue3?

BootstrapVue3 is an attempt to have the BootstrapVueopen in new window components in Vue3, Bootstrap 5, and typescript. Another goal is to have the components written in a simple and readable way

As you may suppose, this library is heavily inspired by BootstrapVueopen in new window, as well as the component properties, events, slots, directives, etc. We want to make it that way because we want to have compatibility with BootstrapVue, so it will be easy to switch between libraries

Contribute and Support πŸ™Œ

This project is still in alpha version so there is much work to do. If you want to contribute you can:

One-time Donations

Or if you prefer you can make a one-time donation through these channels:

"Buy Me A Coffee"open in new windowInvitame un cafΓ© en cafecito.appopen in new window

Requisites

To use this library you have to install these packages:

Install

Installation - Vue.js

Preferred Installation

  • Bootstrap-vue-3 recommends using unplugin-vue-componentsopen in new window for automatic tree-shaking. The following installation method is recommended
  • unplugin-vue-components may have the side effect feature of also automatically importing your components for ease of use. If you are uncomfortable with this, you may prefer the legacy installation without automatic tree-shaking

Install the necessary packages for bootstrap-vue-3:

yarn add bootstrap bootstrap-vue-3 @popperjs/core

yarn add unplugin-vue-components -D
npm i bootstrap bootstrap-vue-3 @popperjs/core

npm i unplugin-vue-components -D
pnpm add bootstrap bootstrap-vue-3 @popperjs/core

pnpm add 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:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { BootstrapVue3Resolver } from 'unplugin-vue-components/resolvers'

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

Finally, in your main.js/ts import the CSS:

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'
Typescript Features

If using TypeScript you will want to add components.d.ts to the include array in your tsconfig.json:

"include": ["components.d.ts", ...],

Legacy Installation

  • This is the old installation method. It is recommended to use the preferred installation as it will automatically remove unused components, resulting in a lower bundle size. You can, however, still use this installation method. Full Nuxt 3 compatibility is expected before a v1.0 release

Install the necessary packages for bootstrap-vue-3:

yarn add bootstrap bootstrap-vue-3 @popperjs/core
npm i bootstrap bootstrap-vue-3 @popperjs/core
pnpm add bootstrap bootstrap-vue-3 @popperjs/core

Then, add to your main.js/ts:

import { createApp } from 'vue'
import BootstrapVue3 from 'bootstrap-vue-3'

// Optional, since every component imports their Bootstrap functionality
// the following line is not necessary
// import 'bootstrap'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'

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

Installation - Nuxt.js 3

Nuxt is not officially supported. Various Bootstrap JavaScript elements contain references to 'Document' and 'Window', which will cause breaking issues during server-side rendering. Bootstrap-vue-3 is currently working on a fix for this

As with the Vue.js installation

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

yarn add bootstrap bootstrap-vue-3 @popperjs/core -D
npm i bootstrap bootstrap-vue-3 @popperjs/core -D
pnpm add bootstrap bootstrap-vue-3 @popperjs/core -D

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

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
  modules: ['bootstrap-vue-3/nuxt'],
  css: ['bootstrap/dist/css/bootstrap.css'],
})

Enjoy it in your app without import.

<template>
  <div>
    <BButton variant="primary">Test</BButton>
  </div>
</template>

Comparison with BoostrapVue

As we said, we based this project on BootstrapVueopen in new window. We consider BootstrapVue as the best implementation of Bootstrap v4, so a good approach is to replicate every BootstrapVue component, as well as their props, events, etc., and add the new features of Bootstrap v5

You can view the planned compatibility list in the following section. It is not a migration guide, which will be finalized upon v1.0.0