feat(compat): add Vue 3 support via @vue/compat (fixes #5196)

jest.config.js

@@ -1,10 +1,20 @@
+const useVue2 = 'USE_VUE2' in process.env
+
+const moduleNameMapper = useVue2
+  ? {}
+  : {
+      '^vue$': '@vue/compat',
+      '^@vue/test-utils$': '@vue/test-utils-vue3'
+    }
+
 module.exports = {
   testRegex: 'spec.js$',
   moduleFileExtensions: ['js', 'vue'],
+  moduleNameMapper,
   transform: {
-    '^.+\\.js$': 'babel-jest',
-    '.*\\.(vue)$': 'vue-jest'
+    '^.+\\.js$': 'babel-jest'
   },
+  transformIgnorePatterns: ['/node_modules(?![\\\\/]vue-test-utils-compat[\\\\/])'],
   coverageDirectory: './coverage/',
   testEnvironmentOptions: {
     pretendToBeVisual: true

package.json

@@ -99,7 +99,10 @@
     "@nuxtjs/robots": "^2.5.0",
     "@nuxtjs/sitemap": "^2.4.0",
     "@testing-library/jest-dom": "^5.12.0",
+    "@vue/compat": "^3.2.24",
+    "@vue/compiler-dom": "^3.2.24",
     "@vue/test-utils": "^1.3.0",
+    "@vue/test-utils-vue3": "npm:@vue/test-utils@^2.0.0",
     "autoprefixer": "^10.2.5",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.1.0",
@@ -148,10 +151,10 @@
     "standard-version": "^9.3.0",
     "terser": "^5.7.0",
     "vue": "^2.6.12",
-    "vue-jest": "^3.0.7",
     "vue-router": "^3.5.1",
     "vue-server-renderer": "^2.6.12",
-    "vue-template-compiler": "^2.6.12"
+    "vue-template-compiler": "^2.6.12",
+    "vue-test-utils-compat": "0.0.3"
   },
   "keywords": [
     "Bootstrap",

src/components/alert/alert.js

@@ -1,4 +1,4 @@
-import { COMPONENT_UID_KEY, Vue } from '../../vue'
+import { COMPONENT_UID_KEY, defineComponent } from '../../vue'
 import { NAME_ALERT } from '../../constants/components'
 import { EVENT_NAME_DISMISSED, EVENT_NAME_DISMISS_COUNT_DOWN } from '../../constants/events'
 import {
@@ -68,8 +68,12 @@ export const props = makePropsConfigurable(
 // --- Main component ---
 
 // @vue/component
-export const BAlert = /*#__PURE__*/ Vue.extend({
+export const BAlert = /*#__PURE__*/ defineComponent({
   name: NAME_ALERT,
+  compatConfig: {
+    MODE: 3,
+    OPTIONS_BEFORE_DESTROY: 'suppress-warning'
+  },
   mixins: [modelMixin, normalizeSlotMixin],
   props,
   data() {

src/components/aspect/aspect.js

@@ -1,4 +1,4 @@
-import { Vue } from '../../vue'
+import { defineComponent } from '../../vue'
 import { NAME_ASPECT } from '../../constants/components'
 import { PROP_TYPE_NUMBER_STRING, PROP_TYPE_STRING } from '../../constants/props'
 import { RX_ASPECT, RX_ASPECT_SEPARATOR } from '../../constants/regex'
@@ -26,7 +26,7 @@ export const props = makePropsConfigurable(
 // --- Main component ---
 
 // @vue/component
-export const BAspect = /*#__PURE__*/ Vue.extend({
+export const BAspect = /*#__PURE__*/ defineComponent({
   name: NAME_ASPECT,
   mixins: [normalizeSlotMixin],
   props,

src/components/avatar/avatar-group.js

@@ -1,4 +1,4 @@
-import { Vue } from '../../vue'
+import { defineComponent } from '../../vue'
 import { NAME_AVATAR_GROUP } from '../../constants/components'
 import {
   PROP_TYPE_BOOLEAN,
@@ -33,11 +33,11 @@ export const props = makePropsConfigurable(
 // --- Main component ---
 
 // @vue/component
-export const BAvatarGroup = /*#__PURE__*/ Vue.extend({
+export const BAvatarGroup = /*#__PURE__*/ defineComponent({
   name: NAME_AVATAR_GROUP,
   mixins: [normalizeSlotMixin],
   provide() {
-    return { bvAvatarGroup: this }
+    return { getBvAvatarGroup: () => this }
   },
   props,
   computed: {

src/components/avatar/avatar.js

@@ -1,4 +1,4 @@
-import { Vue } from '../../vue'
+import { defineComponent } from '../../vue'
 import { NAME_AVATAR } from '../../constants/components'
 import { EVENT_NAME_CLICK, EVENT_NAME_IMG_ERROR } from '../../constants/events'
 import {
@@ -67,11 +67,11 @@ export const props = makePropsConfigurable(
 // --- Main component ---
 
 // @vue/component
-export const BAvatar = /*#__PURE__*/ Vue.extend({
+export const BAvatar = /*#__PURE__*/ defineComponent({
   name: NAME_AVATAR,
   mixins: [normalizeSlotMixin],
   inject: {
-    bvAvatarGroup: { default: null }
+    getBvAvatarGroup: { default: () => () => null }
   },
   props,
   data() {
@@ -80,6 +80,9 @@ export const BAvatar = /*#__PURE__*/ Vue.extend({
     }
   },
   computed: {
+    bvAvatarGroup() {
+      return this.getBvAvatarGroup()
+    },
     computedSize() {
       // Always use the avatar group size
       const { bvAvatarGroup } = this

src/components/avatar/avatar.spec.js

@@ -250,7 +250,7 @@ describe('avatar', () => {
     const wrapper1 = mount(BAvatar, {
       provide: {
         // Emulate `undefined`/`null` props
-        bvAvatarGroup: {}
+        getBvAvatarGroup: () => ({})
       }
     })
 
@@ -265,9 +265,9 @@ describe('avatar', () => {
 
     const wrapper2 = mount(BAvatar, {
       provide: {
-        bvAvatarGroup: {
+        getBvAvatarGroup: () => ({
           variant: 'danger'
-        }
+        })
       }
     })
 
@@ -289,7 +289,7 @@ describe('avatar', () => {
       },
       provide: {
         // Emulate `undefined`/`null` props
-        bvAvatarGroup: {}
+        getBvAvatarGroup: () => ({})
       }
     })
 
@@ -307,9 +307,9 @@ describe('avatar', () => {
         size: '2em'
       },
       provide: {
-        bvAvatarGroup: {
+        getBvAvatarGroup: () => ({
           size: '5em'
-        }
+        })
       }
     })
 

src/components/badge/badge.js

@@ -1,4 +1,4 @@
-import { Vue, mergeData } from '../../vue'
+import { defineComponent, mergeData } from '../../vue'
 import { NAME_BADGE } from '../../constants/components'
 import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props'
 import { omit, sortKeys } from '../../utils/object'
@@ -25,7 +25,7 @@ export const props = makePropsConfigurable(
 // --- Main component ---
 
 // @vue/component
-export const BBadge = /*#__PURE__*/ Vue.extend({
+export const BBadge = /*#__PURE__*/ defineComponent({
   name: NAME_BADGE,
   functional: true,
   props,

src/components/breadcrumb/breadcrumb-item.js

@@ -1,4 +1,4 @@
-import { Vue, mergeData } from '../../vue'
+import { defineComponent, mergeData } from '../../vue'
 import { NAME_BREADCRUMB_ITEM } from '../../constants/components'
 import { makePropsConfigurable } from '../../utils/props'
 import { BBreadcrumbLink, props as BBreadcrumbLinkProps } from './breadcrumb-link'
@@ -10,7 +10,7 @@ export const props = makePropsConfigurable(BBreadcrumbLinkProps, NAME_BREADCRUMB
 // --- Main component ---
 
 // @vue/component
-export const BBreadcrumbItem = /*#__PURE__*/ Vue.extend({
+export const BBreadcrumbItem = /*#__PURE__*/ defineComponent({
   name: NAME_BREADCRUMB_ITEM,
   functional: true,
   props,

src/components/breadcrumb/breadcrumb-link.js

@@ -1,4 +1,4 @@
-import { Vue, mergeData } from '../../vue'
+import { defineComponent, mergeData } from '../../vue'
 import { NAME_BREADCRUMB_LINK } from '../../constants/components'
 import { PROP_TYPE_STRING } from '../../constants/props'
 import { htmlOrText } from '../../utils/html'
@@ -21,7 +21,7 @@ export const props = makePropsConfigurable(
 // --- Main component ---
 
 // @vue/component
-export const BBreadcrumbLink = /*#__PURE__*/ Vue.extend({
+export const BBreadcrumbLink = /*#__PURE__*/ defineComponent({
   name: NAME_BREADCRUMB_LINK,
   functional: true,
   props,

src/components/breadcrumb/breadcrumb.js

@@ -1,4 +1,4 @@
-import { Vue, mergeData } from '../../vue'
+import { defineComponent, mergeData } from '../../vue'
 import { NAME_BREADCRUMB } from '../../constants/components'
 import { PROP_TYPE_ARRAY } from '../../constants/props'
 import { isArray, isObject } from '../../utils/inspect'
@@ -18,7 +18,7 @@ export const props = makePropsConfigurable(
 // --- Main component ---
 
 // @vue/component
-export const BBreadcrumb = /*#__PURE__*/ Vue.extend({
+export const BBreadcrumb = /*#__PURE__*/ defineComponent({
   name: NAME_BREADCRUMB,
   functional: true,
   props,

src/components/button-group/button-group.js

@@ -1,4 +1,4 @@
-import { Vue, mergeData } from '../../vue'
+import { defineComponent, mergeData } from '../../vue'
 import { NAME_BUTTON_GROUP } from '../../constants/components'
 import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props'
 import { pick, sortKeys } from '../../utils/object'
@@ -21,7 +21,7 @@ export const props = makePropsConfigurable(
 // --- Main component ---
 
 // @vue/component
-export const BButtonGroup = /*#__PURE__*/ Vue.extend({
+export const BButtonGroup = /*#__PURE__*/ defineComponent({
   name: NAME_BUTTON_GROUP,
   functional: true,
   props,

src/components/button-toolbar/button-toolbar.js

@@ -1,4 +1,4 @@
-import { Vue } from '../../vue'
+import { defineComponent } from '../../vue'
 import { NAME_BUTTON_TOOLBAR } from '../../constants/components'
 import { PROP_TYPE_BOOLEAN } from '../../constants/props'
 import { CODE_DOWN, CODE_LEFT, CODE_RIGHT, CODE_UP } from '../../constants/key-codes'
@@ -30,7 +30,7 @@ export const props = makePropsConfigurable(
 // --- Main component ---
 
 // @vue/component
-export const BButtonToolbar = /*#__PURE__*/ Vue.extend({
+export const BButtonToolbar = /*#__PURE__*/ defineComponent({
   name: NAME_BUTTON_TOOLBAR,
   mixins: [normalizeSlotMixin],
   props,

src/components/button-toolbar/button-toolbar.spec.js

@@ -82,6 +82,11 @@ describe('button-toolbar', () => {
 
     // Test App for keynav
     const App = {
+      compatConfig: {
+        MODE: 3,
+        RENDER_FUNCTION: 'suppress-warning',
+        COMPONENT_FUNCTIONAL: 'suppress-warning'
+      },
       render(h) {
         return h(BButtonToolbar, { props: { keyNav: true } }, [
           h(BButtonGroup, [h(BButton, 'a'), h(BButton, 'b')]),

src/components/button/button-close.js

@@ -1,4 +1,4 @@
-import { Vue, mergeData } from '../../vue'
+import { defineComponent, mergeData } from '../../vue'
 import { NAME_BUTTON_CLOSE } from '../../constants/components'
 import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props'
 import { SLOT_NAME_DEFAULT } from '../../constants/slots'
@@ -22,8 +22,12 @@ export const props = makePropsConfigurable(
 // --- Main component ---
 
 // @vue/component
-export const BButtonClose = /*#__PURE__*/ Vue.extend({
+export const BButtonClose = /*#__PURE__*/ defineComponent({
   name: NAME_BUTTON_CLOSE,
+  compatConfig: {
+    MODE: 3,
+    INSTANCE_SCOPED_SLOTS: 'suppress-warning'
+  },
   functional: true,
   props,
   render(h, { props, data, slots, scopedSlots }) {

src/components/button/button.js

@@ -1,4 +1,4 @@
-import { Vue, mergeData } from '../../vue'
+import { defineComponent, mergeData } from '../../vue'
 import { NAME_BUTTON } from '../../constants/components'
 import { CODE_ENTER, CODE_SPACE } from '../../constants/key-codes'
 import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props'
@@ -115,7 +115,7 @@ const computeAttrs = (props, data) => {
 // --- Main component ---
 
 // @vue/component
-export const BButton = /*#__PURE__*/ Vue.extend({
+export const BButton = /*#__PURE__*/ defineComponent({
   name: NAME_BUTTON,
   functional: true,
   props,

src/components/calendar/calendar.js

@@ -1,4 +1,4 @@
-import { Vue } from '../../vue'
+import { defineComponent } from '../../vue'
 import { NAME_CALENDAR } from '../../constants/components'
 import {
   CALENDAR_GREGORY,
@@ -180,8 +180,12 @@ export const props = makePropsConfigurable(
 // --- Main component ---
 
 // @vue/component
-export const BCalendar = Vue.extend({
+export const BCalendar = defineComponent({
   name: NAME_CALENDAR,
+  compatConfig: {
+    MODE: 3,
+    OPTIONS_BEFORE_DESTROY: 'suppress-warning'
+  },
   // Mixin order is important!
   mixins: [attrsMixin, idMixin, modelMixin, normalizeSlotMixin],
   props,
@@ -811,7 +815,7 @@ export const BCalendar = Vue.extend({
       {
         staticClass: 'b-calendar-header',
         class: { 'sr-only': this.hideHeader },
-        attrs: { title: this.selectedDate ? this.labelSelectedDate || null : null }
+        attrs: { title: this.selectedDate ? this.labelSelected || null : null }
       },
       [$header]
     )

src/components/card/card-body.js

@@ -1,4 +1,4 @@
-import { Vue, mergeData } from '../../vue'
+import { defineComponent, mergeData } from '../../vue'
 import { NAME_CARD_BODY } from '../../constants/components'
 import { PROP_TYPE_ARRAY_OBJECT_STRING, PROP_TYPE_BOOLEAN } from '../../constants/props'
 import { sortKeys } from '../../utils/object'
@@ -29,7 +29,7 @@ export const props = makePropsConfigurable(
 // --- Main component ---
 
 // @vue/component
-export const BCardBody = /*#__PURE__*/ Vue.extend({
+export const BCardBody = /*#__PURE__*/ defineComponent({
   name: NAME_CARD_BODY,
   functional: true,
   props,

src/components/card/card-footer.js

@@ -1,4 +1,4 @@
-import { Vue, mergeData } from '../../vue'
+import { defineComponent, mergeData } from '../../vue'
 import { NAME_CARD_FOOTER } from '../../constants/components'
 import { PROP_TYPE_ARRAY_OBJECT_STRING, PROP_TYPE_STRING } from '../../constants/props'
 import { htmlOrText } from '../../utils/html'
@@ -21,7 +21,7 @@ export const props = makePropsConfigurable(
 // --- Main component ---
 
 // @vue/component
-export const BCardFooter = /*#__PURE__*/ Vue.extend({
+export const BCardFooter = /*#__PURE__*/ defineComponent({
   name: NAME_CARD_FOOTER,
   functional: true,
   props,

src/components/card/card-group.js

@@ -1,4 +1,4 @@
-import { Vue, mergeData } from '../../vue'
+import { defineComponent, mergeData } from '../../vue'
 import { NAME_CARD_GROUP } from '../../constants/components'
 import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props'
 import { makeProp, makePropsConfigurable } from '../../utils/props'
@@ -17,7 +17,7 @@ export const props = makePropsConfigurable(
 // --- Main component ---
 
 // @vue/component
-export const BCardGroup = /*#__PURE__*/ Vue.extend({
+export const BCardGroup = /*#__PURE__*/ defineComponent({
   name: NAME_CARD_GROUP,
   functional: true,
   props,

src/components/card/card-header.js

@@ -1,4 +1,4 @@
-import { Vue, mergeData } from '../../vue'
+import { defineComponent, mergeData } from '../../vue'
 import { NAME_CARD_HEADER } from '../../constants/components'
 import { PROP_TYPE_ARRAY_OBJECT_STRING, PROP_TYPE_STRING } from '../../constants/props'
 import { htmlOrText } from '../../utils/html'
@@ -21,7 +21,7 @@ export const props = makePropsConfigurable(
 // --- Main component ---
 
 // @vue/component
-export const BCardHeader = /*#__PURE__*/ Vue.extend({
+export const BCardHeader = /*#__PURE__*/ defineComponent({
   name: NAME_CARD_HEADER,
   functional: true,
   props,