Released: 2019-09-06

Please see the changelog for a complete list of commits, and the online documentation for usage.

BoootstrapVue 2.0.0 stable introduces several new features and bug fixes. Please note that this release also includes several breaking changes.

Notable improvements:

• Tooltips and popovers have been competely re-written for better reactivity and stability. The directive versions are now reactive to trigger element title attribute changes and configuration changes. The component versions now perform better when qucikly hovering/unhovering the trigger element. Component and directive versions now have a default delay of 50ms (affects 'hover' and 'focus' triggers only). They can now have a trigger of 'manual' (when used by itself) of which they can only be opened or closed programmatically. Users can now optionally specify the ID that the tooltip or popover uses. For accessibility reasons, the title attribute is removed from the trigger element (target) only when the tooltip or popover is showing, and is restored when hidden.
• Modals, tooltips, popovers, and toasts now work with scoped style classes (requires the use of vue-loader’s /deep/, ::v-deep or >>> deep selectors for targeting inner elements, just like with any other component).
• New SVG background image based sorting indicator icons for <b-table>, with the ability to place them on either the right (default) or left of the table cell headers (via a new prop).
• Programmatic selection of <b-table> selctable rows.
• Ability to provide your own custom footer structure for <b-table> and <b-table-lite>.

Breaking changes and deprecated features removal v2.0.0

Please carefully read the following before upgrading to v2.0.0 stable!

• Vue 2.6+ is now required at a minimum, 2.6.10+ is recommended. Some components will fail to work as expected if using Vue 2.5 (notably tooltips and popovers, but other components may be affected as well).
• All deprecated features have been removed in v2.0.0 stable in order to reduce bundle size and simplify code.

Two notable breaking changes are:

• changes to the table slot naming syntax: the table slot syntax introduced in rc.28 has been modified in v2.0.0 stable for better compatibility with the new Vue v-slot syntax and its limitations (which currently are not documented in the Vue.JS docs).
• the removal of the deprecated /es build directory: Users should now be importing the new top-level named exports when importing individual components, directives, and plugins.

Read the following migration guide for more details.

Migration guide v2.0.0

• Removal of the deprecated /es build directory. Users should now be using the new simplified import syntax introduced in v2.0.0-rc.22. Users should be importing the top-level named exports instead.
• b-dropdown: removal of deprecated text slot. Use the button-content slot instead.
• b-form-* controls, b-form-group, b-form-invalid-feedback and b-form-valid-feedback: validation prop state now only accepts true, false, or null values. Passing the strings 'invalid' or 'valid' will no longer work.
• b-form-group: removal of the deprecated horizontal and breakpoint props. Use props label-cols{-{breakpoint}} instead.
• b-img-lazy, b-card-img-lazy: now rely only on IntersectionObserver support (native or via a polyfill) to determine when to show the image. If IntersectionObserver support is not detected, then the image will always be shown. Use a polyfill if you need to support older browsers (e.g. IE11)
• b-modal: the deprecated BvModalEvent method cancel() has been removed. Use the method preventDefault() instead.
• b-modal: the deprecated BvModalEvent property modalId has been removed. Use the property componentId instead.
• b-nav: removal of the deprecated is-nav prop. Use b-navbar-nav component instead when placing navs in b-navbar.
• b-nav-item-dropdown: deprecated props extra-menu-classes and extra-toggle-classes have been removed. Used props menu-class and toggle-class (respectively) instead.
• b-table and b-table-lite: table cell field, header and footer scoped slot naming convention has changed. Users should be using the new table round bracketed slot naming syntax: use slot cell(field) instead of field or [field], use slot head(field) instead of HEAD_field or HEAD[field], use foot(field) instead of FOOT_field or FOOT[field]. This change was required for better compatibility with the new Vue v-slot syntax. The square bracket syntax introduced in 2.0.0-rc.28 has been replaced with the round bracket syntax to reduce possible confusion and potential future issues with Vue 2.6’s new dynamic slot name syntax.
• b-table: the filter prop will no longer accept a function reference (previously deprecated). Instead, pass a function to the filter-function prop when using a custom filter function. The prop filter is only to be used for the filter’s criteria (i.e. the search value, search RegExpr, etc).
• b-table: passing an object as a fields definition will no longer work. Use the array of strings or array of objects (or a combination of the two) fields definition format instead.
• b-table: sorting icon SASS variables have been changed to handle the new SVG backgrounds. If you previously had custom CSS styling/icons, they will not work as expected - but sorting will still work. the SVG backgrounds can be controlled via SASS variables.
• b-tab: removal of deprecated href prop. Use <b-nav> for controlling panes that change with URL changes.
• b-tabs: removal of deprecated tabs slot. Use slot tabs-end instead.
• b-tabs: removal of deprecated bottom prop. Use the end prop instead.
• Tooltip SCSS: deprecated variable $bv-tooltip-bg-level has been removed. Use variable $b-tooltip-bg-level instead.
• Popover SCSS: deprecated variables $bv-popover-bg-level, $bv-popover-border-level, and $bv-popover-color-level have been removed. Use variables $b-popover-bg-level, $b-popover-border-level, and $b-popover-color-level (respectively) instead.

Please refer to the documentation for the latest usage and examples, and below for a list of fixes and new features.

Bug Fixes v2.0.0

• b-dropdown-*: ensure class bindings are placed on root element for all dropdown sub-components (closes #4022) (#4024) (81efb89)
• b-form-textarea: handle initial auto-height when in modal, tabs, or other component with transition or which uses v-show (fixes #3936, #3702) (#3937) (be3ac62)
• b-link: only add the nativeOn property to componentData when rendering a router link (#3976) (62fb0b6)
• b-modal: ensure non-prop attributes are transferred to the modal outer wrapper div (closes #3896) (#3921) (8bf3a55)
• b-modal: fix scroll to top issue when modal has no-fade set (#4004) (332b79f)
• b-table, b-table-lite: handle edge case where field slot returns no vNodes (fixes #3919) (#3920) (a392059)
• b-table, b-table-lite: render header when not always stacked mode (fixes #3886) (#3887) (2302b31)
• b-table, b-table-lite: generate :key for row-details row based on the primary-key field value if available (#4025) (c7cb16f)
• v-b-toggle: don’t override role if element has a role assigned (#3889) (5d155ba)
• tooltip, popover: overall code refactor for better reactivity and performance (fixes: #1990, #2937, #3480,
  #3717, #3854, closes #3451) (#3908) (eebab43)

Features v2.0.0

• b-carousel: add prop no-wrap for disabling wrapping to start/end (closes #3902) (#3905) (2c8bd23)
• b-dropdown: add role=presentation to <li> elements for improved a11y (#3996) (464d257)
• b-img-lazy: switch IntersectionObserver to use private v-b-visible directive (#3977) (249ccfa)
• b-modal: add scoped style support when portalled (non-static modal) (#3962) (77ad6b9)
• b-nav: add card header support (#3883)
  (4046a53)
• b-pagination: if number of pages changes, try and keep current page active (closes #3716) (#3990) (ae8ce78)
• b-modal: add prop for auto focusing one of the built in-buttons once shown (closes #3945) (#3979) (6f2827e)
• b-table: allow field definition properties filterByFormatted and sortByFormatted to accept a formatter function reference (closes #3892) (#3898) (5492b38)
• b-table: new sorting icons using SVG, plus option to place icon on left of header cell (closes #3687, #3696, #3918, #3966) (#3968) (c4442f4)
• b-table: add filter-debounce prop for debouncing filter updates (#3891) (03536a5)
• b-table: add selectAllRows() and clearSelected() to thead/tfoot slot scopes (addresses #3901) (#3907) (86c53dd)
• b-table, b-table-lite: switch slot name syntax to use round brackets instead of square brackets (#3986) (fca7bd5)
• b-table, b-table-lite: remove deprecated slot names, introduce new slot names (#3866) (249efd9)
• b-table, b-table-lite: use aria-details rather than aria-describedby when details row showing (addresses #3801) (#3992) (f6f73c7)
• b-table, b-table-lite: add support for custom header attributes (closes #2244) (#3876) (8784f31)
• b-table, b-table-lite: add new scoped slot custom-foot to allow user to create their own table footer (closes #3960) (#4027) (cbeeef9)
• b-table, b-table-lite, b-table-simple: add no-border-collapse prop and SCSS (#3987) (253b4f6)
• b-toast: add support for scoped styles (#3963) (ca1b5de)
• tooltip, popover: overall code refactor for better reactivity and performance (fixes: #1990, #2937, #3480, #3717, #3854, closes #3451) (#3908) (eebab43)

Depreaction removals v2.0.0

• b-dropdown: remove deprecated slot text (#3868) (29eb8b1)
• b-form-group: remove deprecated prop horizontal and breakpoint (#3879) (b301822)
• b-nav, b-nav-item-dropdown: remove deprecated slot and props (#3867) (21fab35)
• b-modal: remove BvModalEvent deprecations (#3864) (90c299c)
• b-table, b-table-lite: switch slot name syntax to use round brackets instead of square brackets (#3986) (fca7bd5)
• b-table, b-table-lite: remove deprecated slot names, introduce new slot names (#3866) (249efd9)
• b-tabs: remove deprecations (#3863) (0edac49)
• tooltip/popover: remove SCSS deprecations (#3869) (bea49d4)
• build: remove deprecated es/ build (#3604) (3828f59)

Please see the changelog for a complete list of commits, and the online documentation for usage.

Notable changes

This release is expected to be the last RC release. Next release (hopefully) will be v2.0.0 stable.

Fixes

• b-carousel: reset touchDeltaX to prevent click transformed in swipe.
• b-modal: prevent page scroll when tabbing to bottom of modal + better CTRL+TAB handling.
• b-table: better detection of active text selection during click events.
• b-table: do not sort by formatted value by default (sort by formatted was introduced in 2.0.0-rc.25).
• b-table, b-table-lite: place <tfoot> after <tbody> element for accessibility reasons (and HTML5 spec)
• b-tabs: fix nav item id and aria-controls bug

Features

• config: add config defaults for all size properties.
• b-form-file, b-form-checkbox, b-form-radio: have input element inherit non-prop attributes.
• b-form-file, b-form-checkbox, b-form-radio: add support for control sizes.
• b-table: programmatic row selection.
• b-table: make sorting by formatted value opt-in per field (note this is a change from the sorting by formatted value behaviour of versions 2.0.0-rc.25 through rc.27).
• b-table: added TypeScript declarations for sort-compare-locale and sort-compare-options.
• b-table: allow users to specify top-level keys to be ignored or included when filtering, plus add option to filter based on formatted value.
• b-table, b-table-lite: introduce new field scoped slot naming convention + new fallback scoped slots, and deprecates old field slot name convention.
• b-table-simple: new simple <table> wrapper component that allows users to render their own <thead>, <tfoot>, <body>, etc, content, supporting Bootstrap v4 basic table style options.
• tables: new table child element helper components (b-tbody, b-thead, b-tfoot, b-tr, b-th, and b-td), plus new sort-null-last and table-variant props.
• tables: add optional sticky header (fixed header) support via new prop sticky-header.
• tables: add optional sticky columns (fixed column) support.
• b-toast: added SCSS variable for overriding default toast background color opacity value.

Potential breaking changes

• b-table: based on user feedback, sorting by formatted value is now opt-in per field. This is a change from the default sorting by formatted value behaviour of versions 2.0.0-rc.25 through rc.27. Sorting by formatted value was introduced in 2.0.0-rc.25.

Deprecation notes

• b-table and b-table-lite field scoped slot name syntax (for custom data and header/footer formatting) has been changed in this version to use a new square bracketed syntax. While the previous naming syntax still works, it has been deprecated in favour of the newer naming convention (which prevents potential slot-name conflicts with fields named default and other table slots). Users are encouraged to switch to the new table field slot name syntax, as the old slot name syntax will be removed in 2.0.0 stable release!

• Users should have switched to the simplified import syntax (introduced in v2.0.0-rc.22) when importing individual plugins, components, and/or directives. Importing from the es/ build directory has been deprecated and will be removed in 2.0.0 stable release!

Please see the changelog for a complete list of commits, and the online documentation for usage.

Notable changes

Fixes

• b-modal: ensure header is read for accessibility with JAWS screen reader
• b-nav-item-dropdown: clicking toggle a second time should close menu
• b-table: fix IE11 edge case where custom inputs were not clickable in clickable/sortable cells
• tooltip, popover: handle case where tooltips are applied to dropdowns, obscuring the menu in some cases. Tooltips/popover now auto-hide when the menu opens.

Features

• b-dropdown: new prop split-button-type to specify button type for the split button
• b-modal: for accessibility, read only modal title and not whole header + additional A11Y options
• b-tabs: add new tabs-start slot for prepending extra contentless tab buttons. Deprecate tabs slot in favour of new tabs-end slot.
• Minor codebase improvements, shaving a few bytes off bundle sizes

Other

• Minor docs updates and fixes

Please see the changelog for a complete list of commits, and the online documentation for usage.

Notable changes:

Fixes

• b-collapse: fix memory leak from $root listener
• b-table: add clearfix to table cells in case label wraps in stacked mode on small screens
• docs playground: fix undefined variable when used in IE 11

Features

• b-dropdown, b-nav-item-dropdown: add new lazy prop (for improved performance if you have many dropdowns in a single component/app)
• tooltip, popover: add support for contextual variants and custom class (components and directives), and configurable via SCSS vars, and bootstrap SCSS theme maps.

Performance

• b-link: convert from functional component to regular component (reduces computation time for generating click handlers during render/re-render)
• remove default array/object polyfills. Users of legacy browsers should be using core-js or polyfill.io polyfills.

Types

• bv-toast: add noCloseButton property to BvToastOptions declaration file

Other

• Additional documentation updates / fixes
• Improved docs landing page, general styles, and smaller docs bundle sizes

Deprecation

Users should switch to the simplified import syntax (introduced in v2.0.0-rc.22) when importing individual plugins, components, and/or directives. Importing from the es/ build directory has been deprecated and will be removed in 2.0.0 stable release.

Please see the changelog for a complete list of commits, and the online documentation for usage.

Notable changes

Fixes

• b-input-group: fix kebab-case prop names for prepend-html and append-html.
• b-table, b-table-lite: adjustments to sort icon SCSS positioning, which fixes issues with placing dropdowns in table header cells.

Features

• b-tooltip, b-popover: remove need for route watcher, preventing open tooltip/popover from closing if child route changes and trigger element is still in document.
• b-table, b-table-lite: don’t render thead or tfoot if no detected fields (for accessibility reasons).
• b-table: allow sorting of virtual fields that have a formatter function + support optional localCompare options.
• b-tabs: emit new changed event whenever tabs added, removed or re-ordered.

Other

• Docs: added new accessibility reference section
• Various devDependency and dependency updates

Deprecation

Users should switch to the simplified import syntax (introduced in v2.0.0-rc.22) when importing individual plugins, components, and/or directives. Importing from the es/ build has been deprecated and will be removed in 2.0.0 stable release.

Please see the changelog for a complete list of commits, and the online documentation for usage.

Notable changes

Fixes

• b-table: ensure ctx.sortBy is an empty string when no sort key selected
• b-table-lite: add checks to helper mixins for existence of stopIfBusy method
• b-tabs: handle edge case when registered tabs change order
• Nuxt module: correct transformAssetUrls value for b-card-img and in reference docs
• config: avoid using of operator where possible

Features

• No new features introduced

Deprecation

Users should switch to the simplified import syntax (introduced in v2.0.0-rc.22) when importing individual plugins, components, and/or directives. Importing from the es/ build has been deprecated and will be removed in 2.0.0 stable release.

Please see the changelog for a complete list of commits, and the online documentation for usage.

Fixes

• b-dropdown: close dropdown when clicking on nested elements inside dropdown items with to prop
• bform-input, b-form-textarea: handle case where input has been removed from document during a browser auto-complete
• b-modal: fix IE11 issue with copy/paste from modal into MS Word
• b-modal: properly render *-html props if provided
• b-modal: ensure ignoreBackdropClick flag is properly cleared in clickOut handler
• b-pagination-nav: attempt to re-auto-detect current page when pages array or number-of-pages changes
• b-table: ensure provider is refreshed when filter is an object
• b-tabs: improve child b-tab detection routine - fixes when using extended b-tab child components and fixes bug when specifying an ID on each b-tab child
• update dependency vue-functional-data-merge to ^3.1.0 (to fix handle nested style strings passed to functional components)
• types: add missing BInputGroup to TypeScript definitions

Features

• b-table-lite: new light-weight table component <b-table-lite>for displaying simple tabular data, without all the heavier features of <b-table>
• Further improvements to tree shaking and dead code elimination when importing individual components and/or directives, resulting in smaller project bundle sizes.

Deprecation

Users should switch to the simplified import syntax (introduced in v2.0.0-rc.22) when importing individual plugins, components, and/or directives. Importing from the es/ build has been deprecated and will be removed in 2.0.0 stable release.

2.0.0-rc.22 (2019-05-31)

Please see the changelog for a complete list of commits, and the online documentation for usage.

Notable changes

• Improved/sortened method for importing of plugins, components, and directives, as top-level named exports.
  The ESM and CJS builds now both include these top level named exports.
• Reverted the es/ build directory (changed in v2.0.0-rc.21) back to mini-commonjs modules (from true ES modules) due to issues with Nuxt.js dev mode and some webpack builds expecting CJS format when cherry-picking individual components, directives and plugins from sub-directories.
• DEPRECATION: The es/ build has been deprecated in favour of the newer esm and cjs builds, which allows for importing individual components, directives and plugins from top-level named exports. Users are encouraged to update their imports to the new syntax.

Fixes

• b-modal: use safeId() when comparing id received by hide/show handler
• b-tabs: fix regression with dynamically added tabs not showing
• form controls: handle autofocus when inside a modal (or when inside a transition)
• nuxt module: use bundle new esm build of bootstrap-vue
• types: fix typing of BvComponent and BvPlugin
• es/ directory build, revert to mini-cjs modules (note es/ dir is now deprecated)

Features

• b-button: new prop squared for generating buttons with squared corners
• b-tooltip, b-popover: allow global delay customization via config
• All plugins, components, and directives are now available as top-level named exports:
  • Default export is still the BootstrapVue plugin
  • Simplified import format for importing components, directives, plugins: import { ModalPlugin, CardPlugin, BAlert, BRow, BCol, VBScollspyPlugin } from 'bootstrap-vue'
  • New esm/ modular build with top-level named exports (tree shakeable)
  • New dist/bootstrap-vue.esm.js esm bundle with top-level named exports
  • New dist/bootstrap-vue.common.js bundle with top-level named exports
  • No need to cherry-pick from sub directories for plugins/components/directives
  • Most package bundlers will pick the appropriate build automatically
• Nuxt module:
  • Improved tree shaking using the new import methods
  • Automatically adds transformAssetUrls settings for BootstrapVue component props.

2.0.0-rc.21 (2019-05-26)

Please see the changelog for a complete list of commits, and the online documentation for usage.

Notable changes

Fixes

• b-alert: handle case where dismiss countdown changes to a boolean value
• b-dropdown: delay opening of dropdown via $nextTick when using the .show() method
• b-input-group: fix issue with append slot
• b-input-group: use same input-group-prepend/append for both props and slots
• b-modal: delay initially open modal via nextTick when using v-model or visible prop
• b-tabs: fix regression when tabs are rendered in a lazy modal
• b-toaster: CSS fix for IE11 support
• types: fix msxBoxConfirm typo
• use installFactory for main BootstrapVue plugin installer

Features

• b-img-lazy: add support for IntersectionObserver (default, with fallback to scroll events if Intersection Observer not available)
• b-modal: use custom transporter component for portalling content
• b-tooltip, b-popover: add fallback-placement prop
• b-table: don’t use css grid for stacked table SCSS - for IE11 compatibility
• all form controls: added new autofocus prop that will auto-foucs the input when the component is inserted into the DOM
• types: better typescript type declaration files, when importing individual components and plugins.
• Nuxt module: optimize imports into single import statements
• don’t warn about 'Multiple Vue instances detected' when testing in vue-test-utils + JSDOM

Accessibility

• b-toast: prevent duplicate toast announcements for screen readers

Other

• Updates to docs

2.0.0-rc.20 (2019-05-12)

Please see the changelog for a complete list of commits, and the online documentation for usage.

Notable changes

Features and enhancements

• b-button: add prop pill for creating pill style buttons
• b-dropdown: additional semantic markup optimizations for accessibility
• b-dropdown & b-nav-item-dropdown: pass optional scope to default slot
• b-modal: use PortalVue for modal placement
• b-table: make table sort icons configurable via SCSS variables
• b-toast & b-toaster: make some prop defaults configurable via the global config
• v-b-toggle: make target list reactive to changes
• make more component appearance prop defaults globally configurable
• issue a console warn, if multiple instances of Vue detected when plugin installed, with link to getting started docs
• simplify method of importing individual components, directives and plugins
• Nuxt.js module now supports individual component and directive import
• new typescript type declaration files (BETA)

Fixes

• b-collapse: fix is-nav link click behaviour - check if collapse has display: block !important before attempting to close collapse
• b-dropdown & b-nav-item-dropdown: fixes keyboard nav issue with dropdown forms
• b-form-input & b-form-textarea: properly handle out-of-sync values
• b-modal: fix return focus edge case bug in IE11
• b-modal: exclude document.body when determining return focus element, as focusing document.body can cause unwanted scrolls in some browsers
• b-modal: prevent duplicate key when sending to portal-target
• b-pagination & b-pagination-nav: use unicode escape sequence for default bookend button content
• b-toast: use appendChild instead of append for better IE 11 support
• $bvToast,$bvModal: ensure values passed to slots are arrays for Vue 2.5.x backwards compatibility

Other

• Minor documentation updates/fixes
• Additional unit testing