Back to migration overview

BootstrapVue to BootstrapVueNext Migration Overview ​

Overview of the major BootstrapVue to BootstrapVueNext migration themes, prerequisites, and deprecation policy.

Edit this page on GitHub

BootstrapVue to BootstrapVueNext Migration Overview ​

Summary ​

Overview of the major BootstrapVue to BootstrapVueNext migration themes, prerequisites, and deprecation policy.

Affected APIs ​

  • BootstrapVueNext

Breaking Change ​

BootstrapVueNext is an entirely new implementation of BootstrapVue based on Vue 3 and Bootstrap 5. Therefore, you should not expect this to be a drop-in replacement. Where possible compatibility has been maintained, but providing a clean developer experience when working with Vue 3, Bootstrap 5 and this library is a higher priority.

You should start by familiarizing yourself with the Vue 3 Migration Guide, especially the breaking changes section and the Bootstrap 5 migration guide. While there are some places where this library will insulate you from the changes to the underlying libraries, a general familiarity with the changes in the core dependencies will serve you well.

For instance, there are likely many places where you use Bootstrap utility classes in order to style your components. Bootstrap 5 made a breaking change to all utility classes that involve left and right (or l and r) to be start and end (or s and e). This will affect components such as BNavBar in unexpected ways that BootstrapVueNext has no control over.

Similarly, left and right props and values in the bootstrap-vue-next API are generally replaced by start and end.

Bootstrap-vue-next will commit to breaking changes whenever Bootstrap marks something as "deprecated". These changes may be resolved automatically, or they might necessitate manual action from the library's users.

Nuxt ​

bootstrap-vue-next integrates with nuxt 3 so if you are using nuxt, please read their migration guide and our router link support reference

Status ​

This migration guide is a work in progress. We're adding to this guide as we complete the documentation and parity pass and doing our best to note each component or directive that hasn't been through the full process.

If you would like to help, please refer to the improving the documentation and help verify parity sections of our contribution guide.

For section of this guide that are not marked as in progress, we're still interested in examples of migrations that you have found tricky or clarification if the details in the guide weren't sufficient.

Deprecation ​

We will mark features of BootstrapVue as deprecated for one of several reasons.

  1. It is no longer relevant because:
    1. It's been deprecated by Bootstrap
    2. Some aspect of Vue3 or bootstrap5 has made this feature less useful or not reasonable to implement
    3. The functionality can be as easily achieved using bootstrap natively (e.g. adding classes)
    4. There is a more modern way of solving the same problem - in this case we are trying to point out the parity feature in the migration knowledge base
  2. There hasn't been enough demand to implement this feature, and in many cases we believe we can add it in a future version without causing a breaking change. If you would like this feature, please submit an issue, upvote an existing issue, or better yet submit a pull request.

Migration Notes ​

  • Extracted from the canonical BootstrapVue → BootstrapVueNext migration guide.
  • Review related migrations for shared prop, event, and slot changes.

Safe Automatic Rewrite ​

No. This entry includes behavioral or structural changes and should be reviewed manually before applying automated transforms.