Vue 3 support

[johandalabacka]

Hi

What is the status of bootstrap-vue and Vue 3? I know Vue 3 is just in beta now. But I see no statement or other on your page if/how/when you are going to support Vue 3.

With kind regards, Johan

[vesper8]

Interested in this. Just tried just now for the first time to upgrade a current project to Vue 3 and it seems both bootstrap-vue and one of its dependencies portal-vue have issues with Vue 3

 ERROR  Failed to compile with 15 errors                                                                                                                              4:20:33 p.m.

This dependency was not found:

* vue in ./node_modules/bootstrap-vue/esm/utils/vue.js, ./node_modules/portal-vue/dist/portal-vue.common.js and 13 others

To install it, you can run: npm install --save vue

[tmorehouse]

Since Vue3 is in the alpha/beta stages, it is probably resolving (when importing) to a version < 3.

You may need to add an alias for vue in your webpack config to point to the beta version.

[zaidk26]

Since Vue3 is in the alpha/beta stages, it is probably resolving (when importing) to a version < 3.

You may need to add an alias for vue in your webpack config to point to the beta version.

Hi Please advise on how to do this

[tmorehouse]

See: https://bootstrap-vue.org/docs#aliasing-vue-import

[lamebear]

With or without the alias, I get the console error:

config.js?3844:10 Uncaught TypeError: Cannot read property 'prototype' of undefined
    at eval (config.js?3844:10)
    at Module../node_modules/bootstrap-vue/src/utils/config.js (chunk-vendors.js:3035)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (alert.js?e21a:1)
    at Module../node_modules/bootstrap-vue/src/components/alert/alert.js (chunk-vendors.js:83)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (index.js?7a38:1)
    at Module../node_modules/bootstrap-vue/src/components/alert/index.js (chunk-vendors.js:95)

The config.js file it is referring to is src/utils/config.js

In the terminal (running npm run serve), there are multiple instances of the following errors, but they don't seem to stop compilation:

Vue is not a constructor function type.
'vue' has no exported member 'PluginObject'
'vue' has no exported member 'PluginFunction'.
'vue' has no exported member 'DirectiveOptions'.

Vuejs: 3.0.0-beta.4
Bootstrap-Vue: 2.13.0
Importing individual plugins

Hope this gives some clarity. I love this project.

[akauppi]

Interested in this and willing to help in testing.

Not using Webpack or Rollup but the brand new vite.

[robrich]

Getting this error too.

Using https://cli.vuejs.org/guide/webpack.html to add alias for cli project I get:

// vue.config.js

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        vue$: 'vue/dist/vue.esm-bundler.js'
      }
    }
  }
}

and still get the error in config.js: Uncaught TypeError: Cannot read property 'prototype' of undefined

[tmorehouse]

Note there are quite a few breaking changes between Vue 2.x and Vue 3.x, which will need changes in BootstrapVue.

Vue.extend, which is used extensively, is not available in Vue 3.x. (it is replaced with createComponent() method exported by Vue 3.x)

You might be able to import Vue and createComponent first, and then set Vue.export = createComponent, and then import the 3rd party libraries (like PortalVue, BootstrapVue, etc).

[akauppi]

What would be helpful for me is to have an estimate, what the "on the roadmap" means.

I can wait, say, one month, but if the Vue 3 (beta) support is not going to be there until autumn, I must look around for other solutions. Sorry that I cannot help, other than testing.

[ux-engineer]

Same here, definitely needing Vue 3.0 support by August. And it will be superb! :)

[AndrewGorman]

Is anyone currently working on Vue 3 support? I would be willing to try my hand helping with a few MRs but it doesn't appear it's being worked on at all yet

[WayneHiller]

I think Vue 3.0 support is going to be a must, the release date is not far away. If there are too many breaking changes maybe a new branch for Vue 3.0 only would be the way to go.

[lamebear]

I have a fork that I started working on Vue 3 support and found a few things:

• The event system has changed, so all calls to this.$once and this.$on need to be reworked
• Since components are no longer constructors, ModalManager needs to be reworked.
• No test suites will currently pass due to nuxt still importing vue-template-compiler. Vue 3 uses @vue/compiler-sfc instead. Due to Nuxt importing this, jest errors on a package version mismatch between vue and vue-template-compiler.
• The render functions changed, with h no longer being supplied (I think...). h now has to be imported from vue. I'm not too familiar with render functions (only ever done SFC) but all of those need to be reworked.

None of the changes include any of Vue 3's composition API with the exception of the change to config.js. Vue no longer has a prototype, so I instead changed the config to use a reactive object. I think it will work, but it could use some more love.

I have been testing this using the yarn link method. There are no compile errors, but there are runtime errors revolving around the use of this.$once, h not being defined, and accessing props/data in the render functions.

You can find the fork here: https://github.com/lamebear/bootstrap-vue/tree/vue3

If you want to create a new branch for Vue3 on this repository, I can merge this there and we can start plugging away on it.

[mariusa]

@lamebear Are any of your changes portable to current version? Would be best to prepare current version for migration and then have just a small diff for Vue3, rather than a huge one.

Just to be clear, we're aiming for bootstrap-vue to be usable with Vue 3, with minimal changes, right? Migration to Vue 3 APIs would be a different, large project.

eg

The event system has changed, so all calls to this.$once and this.$on need to be reworked

Nope, only Vue.$on was removed. Components can still use this.$on. I just tested this. If Vue.$on is used, as an event bus, that can be replaced with mitt npm now.

Sample code generated by vite & modified:
HelloWorld.vue

<template>
  <h1>{{ msg }}</h1>
  <button @click="clickHandler()">count is: {{ count }}</button>
  <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      count: 0
    }
  },
	methods: {
 		clickHandler() {
			this.count++
			this.$emit('hello', {count: this.count})
		    }
	}


}
</script>

App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3.0 + Vite" @hello="hello()" />
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },

	methods: {
		hello() {
			console.log('hello event')
		}	
	
	}
}
</script>

[Hiws]

I believe the current plan is to release Bootstrap-Vue 3.0 (at some point in the future), which will implement support for Vue 3 and migrate to Bootstrap 5 at the same time.

So there would be a Vue v2.x+Bootstrap v4.x branch and a Vue v3.x+Bootstrap v5.x branch of Bootstrap-Vue.

[thedavefulton]

@mariusa I'd love to be involved in this process. I'm happy to pick up any tasks that need to be worked, whether that's converting components or testing or whatever. I'd appreciate any guidance to get rolling; should I ping @lamebear and see about assisting them? Let me know, thanks! Be well 🖖

[mariusa]

@tmorehouse would be best to advise how to go forward.
The vue3 project is empty now https://github.com/bootstrap-vue/bootstrap-vue/projects/6

[thedavefulton]

Sounds good, thanks! I look forward to hearing from @tmorehouse whenever it's convenient.

[tobiasdiez]

Is there any news, now that vue 3 hit the release candidate stage?

[ux-engineer]

Any news on the Vue v3.x + Bootstrap v5.x branch...?

[ux-engineer]

Hi @pi0 ! As it seems @tmorehouse has been taking time off since end of May, would you have time to oversee development for getting this library Vue 3 ready?

[WayneHiller]

I would also be interested in helping if I can. I use bootstrap-vue in a large production project so it is important to me to get switched over to Vue 3.

[essenmitsosse]

Me too. If you need any help let me know. Would love to contribute.

[thedavefulton]

I would also still like to help where I can. I spent some time this weekend looking over the BV lib and the Vue 3 migration guide and what I took away from all of that is that I may need some help 🤣

[jacobmllr95]

We will come up with a more concrete roadmap in the next few days but currently the plan is:

BootstrapVue v2:

• Feature-freeze after v2.17.0
• Only critical bugfixes and security updates

BootstrapVue v3:

• Based on BootstrapVue 2.17.0
• Vue.js v3 support
• Bootstrap v4.x support
• Release: Short after Vue.js v3 release

BootstrapVue v4:

• Complete rewrite
• Vue.js v3 support
• Bootstrap v5 support
• Release: No ETA yet

[stanliwise]

The prototype error is same for me. I don’t think there is a way for bootstrap Vue to work with vue3 right now

[Rubens10010]

Hi could anyone provide an alternative? I'm stuck with this just for table component and data provider for pagination.

[mrts]

@Rubens10010, you could look into PrimeVue and DataTable in particular. I haven't tried it and would be really interested if it delivers according to its promise.

[martonx]

@Rubens10010 Element-Plus and Vue-Good-Table-Next are quite good combination.

[xanf]

Crossposting for visiblity: #6905 (comment)

[chirumist]

Hi there,
How much time for the beta version Or the Alpha version to come out?

[xanf]

x-post for visibility: #6872 (comment)

[scholtz]

Vue2 is after end of life.. only security fixes are performed..

https://endoflife.date/vue

it would be nice if bootstrap-vue projects would be migratable to vue3

[kimmy-wang]

I started a new project and planned to use my spare time to upgrade bootstrap-vue to adapt to Vue3.

https://github.com/bootstrap-vue-plus/bootstrap-vue-plus

[Drumstix42]

https://github.com/bootstrap-vue-plus/bootstrap-vue-plus

No real readme, no working homepage URL? This blind link is interesting, but there's no context here. Not ideal.

[Drumstix42]

Vue2 is after end of life.. only security fixes are performed..

https://endoflife.date/vue

it would be nice if bootstrap-vue projects would be migratable to vue3

Vue 2 has shipped a final minor release (2.7) in July 2022, which backports a selected subset of new features from Vue 3. Vue 2 has now entered maintenance mode: it will no longer ship new features, but will continue to receive critical bug fixes and security updates until the end of 2023.

But the comment just before yours has the context to answer your question:
#5196 (comment)

It's being worked on, but there are many slow downs due to real world issues.

[DerAlbertCom]

https://github.com/bootstrap-vue-plus/bootstrap-vue-plus

Wasted time, it would be better if you had put that effort in this original project.

[kimmy-wang]

https://github.com/bootstrap-vue-plus/bootstrap-vue-plus

Wasted time, it would be better if you had put that effort in this original project.

I would never do this.

[alexandergroup-sciszewski]

Going to assume the answer to the question is probably not going to happen. That's ok, no one is making money from maintaining the BootstrapVue project. Thanks for all your effort to get it this far. We appreciate all you did.

[xanf]

With v2.23.0 released we have initial support for Vue3 using @vue/compat. While this is definitely not enough - I'm closing this issue - we definitely has a plan to support Vue3 in proper way by writing entire project, but in order to maintain single source of truth I will be putting all relevant information here- #6872

[sahamnadeem]

its been almost a year... where is version 3?

[Hiws]

its been almost a year... where is version 3?

https://github.com/bootstrap-vue-next/bootstrap-vue-next