Vue 3 support
johandalabacka opened this issue Β· 288 comments
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
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
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.
Since
Vue3is in the alpha/beta stages, it is probably resolving (when importing) to a version < 3.You may need to add an alias for
vuein your webpack config to point to the beta version.
Hi Please advise on how to do this
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.
Interested in this and willing to help in testing.
Not using Webpack or Rollup but the brand new vite.
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
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).
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.
Same here, definitely needing Vue 3.0 support by August. And it will be superb! :)
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
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.
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.$onceandthis.$onneed to be reworked - Since components are no longer constructors,
ModalManagerneeds to be reworked. - No test suites will currently pass due to nuxt still importing
vue-template-compiler. Vue 3 uses@vue/compiler-sfcinstead. Due to Nuxt importing this, jest errors on a package version mismatch betweenvueandvue-template-compiler. - The render functions changed, with
hno longer being supplied (I think...).hnow has to be imported fromvue. 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.
@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>
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.
@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
Sounds good, thanks! I look forward to hearing from @tmorehouse whenever it's convenient.
Is there any news, now that vue 3 hit the release candidate stage?
Any news on the Vue v3.x + Bootstrap v5.x branch...?
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?
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.
Me too. If you need any help let me know. Would love to contribute.
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 π€£
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
The prototype error is same for me. I donβt think there is a way for bootstrap Vue to work with vue3 right now
Vue 3.0 is stable (under 'next' -tag), jej! π° https://github.com/vuejs/vue-next/releases/tag/v3.0.0
@jackmu95 Sorry to be a hasty-pants here, yet I'm sure others are also eager to hear as to when can we expect to have Vue 3 support with this library? π Having now entered the long anticipated time period of "Short after Vue.js v3 release"... π
We will start with the Vue 3 development this week!
Hi @jackmu95
By when we can expect the release?
Edit : I just meant to get a rough estimate so I could evaluate what to use for my project.
@adarshk2522 feel free to contribute ;)
I got this error with vue 3
Uncaught TypeError: Cannot read property 'prototype' of undefined
Waiting for vue 3 support
@fireb1003 As the issue says, this is about implementing vue3 support. No need to add another comment with the known error or "+1". Subscribing is enough to for others to see your interest.
Vue 3
npm create test
Default preset (Vue 3 preview)
vue add bootstrap-vue
@Beastvour If you look at the fork that I created I solved that by using a reactive({}) as the config instead of storing it on Vue.prototype.
https://github.com/lamebear/bootstrap-vue/blob/vue3/src/utils/config.js#L8-L22
Thanks for all of the awesome work that you do! β€
BootstrapVue v4:
- Complete rewrite
- Vue.js v3 support
- Bootstrap v5 support
- Release: No ETA yet
Will this still support Vue 2 as well?
@bbugh It very certainly won't. It doesn't seem like it's possible to support both Vue versions, because the BC breaks are too significant.
Eagerly waiting on this. π
Vue 3 support will come!
Please be patient β€οΈ
@bbugh BootstrapVue v4 with support for Bootstrap v5 will be a complete rewrite with Vue 3's composition API and will not support Vue 2.
@jackmu95 if the composition API is the only potentially inhibiting factor for Vue 2 support, you can use vue-demi to support Vue 3 natively and Vue 2 with the @vue/composition-api. It works very well and would require little extra effort, only changing the package to import from (import { ref } from 'vue-demi'). For example, vue-apollo is using it for the Vue 2/3 compatible composition package.
if the composition API is the only potentially inhibiting factor for Vue 2 support
I haven't said that. There will be definitely more.
But when there is a good/easy way to support Vue 2 we will look into that.
@jackmu95 @bbugh @mariusa Sorry to bother you, I wanted to ask, maybe you need help with development - I could do some undesirable work - for example, write documentation, convert icons, write some library components that no one wants to write. If there is any opportunity for this I would like to help speed up the development of BootstrapVue 4. Don't think about it, I really like this library and the deadline is very burning :-)
Is there bootstrap-vue/bootstrap-vue-next repo?
Is there bootstrap-vue/bootstrap-vue-next repo?
No. There will be a next branch soonish.
Hi, is there any possibility to contribute to vue 3 support? I really would like to help with this.
@jackmu95 Do you already have a general roadmap on what needs to be done?
For Bootstrap 5 support: I think that if an app does the step of migrating all their UI styles to Bootstrap 5, they can do the same for vue. And most popular plugins will be available for vue3 soon.
@michaelzangl Bootstrap 5 support will be an another major version (with a complete rewrite of this library), unrelated to Vue 3 support that should be arriving soonish (hope not Blizzard's soon-ishβ’).
As Jack posted earlier:
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
@ux-engineer I was interested in a more detailed timeline to contribute.
I'am currently in the process of prototyping a Vue 3 compatible build of BootstrapVue that also supports Vue 2.
A single codebase for Vue 2 and 3 would be awesome to support users that have to stick for Vue 2 for a while.
This is (or could be) possible by vue-demi.
I already have some components working but there are some major challenges to tackle (global events, v-model handling, etc.).
I hope to be able to decide wether we could/should go this route by the end of next week - otherwise we have to go with a Vue 3 only route for BootstrapVue v3 and BootstrapVue's Vue 2 support will have a EOL somewhere in the future.
Documenting how far I've come and what still needs to be done will also happen in the coming week.
Until then, please be a bit more patient π
@jackmu95 I presume the upcoming complete rewrite is going to be done in TypeScript?
@jackmu95 I presume the upcoming complete rewrite is going to be done in TypeScript?
Exactly.
looking for this also.
Not trying to put any pressure whatsoever.
But it would be quite helpful to have a rough estimate on when a Vue 3 compatible version of BootstrapVue is to be expected.
This would allow teams to take decisions on new projects: stick with Vue 2, look for alternatives, etc...
My main point here is: not providing an estimate is equivalent to declaring:
We are unable to roughly estimate the amount of effort required to write a Vue 3 compatible version of BootstrapVue. Hence, at this point, your guess is as good as ours.
I believe any estimation would be better than that.
I believe any estimation would be better than that.
Our goal is to have it ready by the end of the year.
You have to keep in mind that there is a hole ecosystem of libraries behind developing such a project that needs to be Vue 3 ready to do proper testing and documentation. Some of them are still in beta or in RC phase.
As an avid user of BootstrapVue, I am very keen to see this get moved to Vue3 so I can continue to use it for newer projects.
How can I get involved with helping with the development / migration? @jackmu95
BootstrapVue v2.19.0 with global config support for all component props will land today.
This was the major project @Hiws and I were working on this week.
When I have these changes merged and adapted back into the v3-dev branch I will keep you up to date on the current progress and what are the next steps.
I believe any estimation would be better than that.
Our goal is to have it ready by the end of the year.
You have to keep in mind that there is a hole ecosystem of libraries behind developing such a project that needs to be Vue 3 ready to do proper testing and documentation. Some of them are still in beta or in RC phase.
Than you very much for the estimation.
I'm well aware of the implications. I don't think Vue 3 will be production ready for at least 6 months from now, everything considered. It's always the last 10% that's most time consuming.
BootstrapVue v2.19.0 with global config support for all component props will land today.
That's just awesome!
My bootstrap ^5.0.0-alpha3 works without vue(Vue3.0.0)
main.ts
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
This is for those who are tired of waiting for the release of a compatible vue-bootstrap with version vue3
My bootstrap ^5.0.0-alpha3 works without vue-bootstrap(Vue3.0.0)
main.ts
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
Of course loading any CSS into a Vue project works.
However, that has nothing to do with BootstrapVue components being usable inside a Vue 3 project.
First of all thanks for the time and effort, what's the progress so far for vue 3 support? You had the goal to have it ready by the end of the year. Is this still your goal? Thanks again :)
It is still the goal and I'am make some good progress.
Having it ready still doesn't mean that it is production ready by then.
Good to hear! Thanks again!
@michaelzangl Bootstrap 5 support will be an another major version (with a complete rewrite of this library), unrelated to Vue 3 support that should be arriving soonish (hope not Blizzard's soon-ishβ’).
As Jack posted earlier:
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
the mean is v2.20.1 is already suitable for vue3οΌ
v2.20.1 is already suitable for vue3οΌ
Hi. No 2.20.1 is not yet compatible with Vue 3. Den tis 8 dec. 2020 05:58z.g.y notifications@github.com skrev:
β¦
v2.20.1 is already suitable for vue3οΌ β You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#5196 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACJJQBMJJBZ7WIRU64QNI2DSTWXBDANCNFSM4MM3A4MQ .
Thanks for your adviceπ
My bootstrap ^5.0.0-alpha3 works without vue(Vue3.0.0)
main.ts
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'This is for those who are tired of waiting for the release of a compatible vue-bootstrap with version vue3
This is actually what I am doing right now. I started writing my own components. The JS part of Bootstrap can easily be replaced so that you can also do things like dialogs, modals and toast. It is worth a look, if you want to start your project with Bootstrap 5 + Vue 3 or if you need to integrate into a project that uses those, since official support in this library will probably take some time.
It is still the goal and I'am make some good progress.
Having it ready still doesn't mean that it is production ready by then.
Considering the last commit on the v3-dev branch was on 2 Dec 2020, I think it's safe to say that progress on Vue 3 support has come to a standstill.
@jackmu95 Can you give a rough estimation on the work that is still left on the v3 branch? This project is the last remaining issue which prevents me from upgrading one of our production apps to Vue 3 and if I can help to speed up the development progress I would be happy to.
Sorry guys, I had some really tough weeks at work which delayed my progress on the Vue 3 front.
I have some time off soon and will focus on getting a Beta ready by the end of the month.
The changes from #6141 (released with v2.21.0) were a huge step to being able to have a shared Vue 2 and 3 codebase and I need to merge them into the v3-dev branch.
Hey there,
Hope we will get this soon! Our team is starting an innovating web project and definetly need Bootstrap-Vue ready for Vue 3.
Thanks in advance for your work
How would you feel about a bounty on this issue?
https://rysolv.com/issues/detail/674925c8-75c6-4a6d-a56b-9c2c5d9be441
We like to support this development with a bounty from our company, but wanted to ask if you prefer another method.
themanmaran has contributed $50.00 to this issue on Rysolv.
The total bounty is now $50.00. Solve this issue on Rysolv to earn this bounty.
An anonymous user has contributed $20.00 to this issue on Rysolv.
The total bounty is now $70.00. Solve this issue on Rysolv to earn this bounty.
Not really sure how that bounty system works.
However, the another way to support BootstrapVue and its development is to utilize the OpenCollective page https://opencollective.com/bootstrap-vue/
@Hiws,
Resolv is quite straight forward and I'd say it has some potential, for the benefit of both open source devs and their users. Particularly for the devs, me thinks.
The current paradigm for supporting open source software is: I'm the developer, I develop what I want, if you like what I already developed, you can fund me and I continue to develop it, if I want to, the way I want to. I have no obligation towards you as a user of my product.
By now, it should have become very clear (especially for devs maintaining large libs, like this one) the above system fails short of remunerating the devs for the true value of their efforts.
Rysolv attempts to partly resolve this problem, by giving the user more control over what's being developed and allowing them to back their requirements with funds.
User decides what to fund and the value. Other users can join and add to the value. If the developer fulfills the requirement (merges the issue), they receive the bounty. Resolv has the potential to become a gold mine for open source developers, if used right.
However, the 10% charge on all transfers is a huge marketing error. It will keep them from growing exponentially. I think setting it to 2% would make them grow so much faster and earning a lot more money than the current 10%. In my estimation, the only question is if lowering it to 1% would make them more money than lowering it at 2%. But with 10% they're pretty much shooting their idea in the foot when the race is about to begin.
Hell, if anyone makes a Rysolv replica and keeps it at 1% for a year, Rysolv will basically eat dust, while the others make millions.
By now, it should have become very clear (especially for devs maintaining large libs, like this one) the above system fails short of remunerating the devs for the true value of their efforts.
I estimate the true value for a change like this to be ~4-6 Months of work for a person full time (including testing), so the bounty is ~1000 times less than it needs to be for making it interesting as dev to work on it just for the money.
Such bounties are very difficult to handle and tend to cause conflicts in open source projects, especially when multiple people are working on it. Mixing volunteer work with paid one is always a difficult topic. If you want a feature developed (as company), you can sponsor a developer directly and make a contract with him/her to develop that one specific feature the way you expect it to be and create a PR for it (those will usually be accepted if the work is good). But just giving a bounty to the ticket won't help you (since you may not get what you want) and not the developer (since many people will then just try to get that bounty instead of developing a reliable, long-term product).
Hm yeah, seems complicated - while my company would be able to fund some portion of this feature we'd like to use, we can't fund all of it. So I liked the general idea of pooling SME funds to actually get a somewhat decent funding for a dearly needed feature. Supporting the project generally is also an option, but like the comment above suggests, getting some control of priotization through bounties is huge, as in this case we specifically need vue3 support within a foreseeable future. I also played with the thought of contributing ourselves, but I am afraid the project onboarding is a bit much for us right now.
Anyway, if there is no clear "yay" of the core contributers here I withdraw my proposal propagating rysolv
Mixing volunteer work with paid one is always a difficult topic.
I hear you and I fully agree.
But you should also try to picture this (quite common) scenario: small company, somewhat related to coding but actually focused on providing some other services, in some other sector (finance, banking, visualizations of some particular types of data, etc...). They're using BV + Vue 2. They might even have a lead dev passionate about Vue, who can hardly wait to use BV with Vue 3, when it comes out. But imagining them paying someone to develop BV + Vue 3 for them? It's absurd. They basically don't care if it ever comes out. They'll be using BV + Vue 2 until something better comes along, whether that something is BV + Vue 3 or not, right?
I'd say it's harder to pitch a donation to a lib than a donation to an issue. Obviously, I might be wrong. π€·
I personally don't see a bounty program as a good option.
@michaelzangl describes the reason why I think so quit on point.
I started contributing to BoostrapVue since we started using it at the company I work for and we faced some issues, so I looked into them and tried to solved them. When I found a new issue, I created an issue followed by a PR that tries to solve it.
We still use it and heavily rely on it to this date and Vue 3 support will definitely happen!
What I currently don't like is the rush and pressure for Vue 3 support.
I know it's the "cool new kid on the block" but what a lot of people missed after the official release is that it is still not stable and the whole ecosystem around it isn't either. The Vue team is working hard to get it ready but it will still take months to complete. The last few percent are always the hardest!
For a large project like this that relies a lot on "the ecosystem" (e.g. VTU, vue-router, Nuxt.js) it's really difficult to migrate to a new major version when the are or can be bugs at so many places and you have to find out if it is related to the changes you made or if they come from a dependency. This heavy slows down development!
We currently still need to stabilize BootstrapVue v2.x and keep on track with Bootstrap v4.x changes.
With the next minor version we are on a good way and after that we can continue to focus on the Vue 3 migration.
There were many people that offered their help for the Vue 3 migration but it would be awesome if they could start contributing now and grab a open issue and try to tackle it. We have an awesome CI setup which should help you to get started!
When the initial migration is done, it would be awesome to have a few contributors to split up tasks to and discuss possible solutions for open issues.
A contribution can be worth a lot more than a donation!
@jackmu95 I couldnt agree more and thank you and the bootstrap-vue team for everything you've done.
- this thread needs to stop talking about bounty programs, if you want to continue, open a new issue, this issue is not the place for it
- If you want to comment on this issue asking "is Vue3 support done yet", "hope this is done soon", "my company uses bootstrap-vue, cant wait to see vue3 support", dont add another comment, just thumbs up all the existing unproductive comments
Productive comments only please (and yes, i get the irony of me posting this π )
They might even have a lead dev passionate about Vue, who can hardly wait to use BV with Vue 3, when it comes out. But imagining them paying someone to develop BV + Vue 3 for them? It's absurd.
Is it? That's exactly what I did for now. As long as there is no official BootstrapVue support, I just wrote the components myself. But only the ones required for that particular project, which is a subset of bootstrap vue. So for example I wrote a dropdown. And a modal dialog. But I did not add a , since that can easily be replaced with a
That way, I can use Bootstrap in that vue project and can drop in the more tested BootstrapVue version as soon as it is ready.
I'd say it's harder to pitch a donation to a lib than a donation to an issue. Obviously, I might be wrong. shrug
It is really hard to define an issue. Take the Bootstrap Vue 3 port: There is a lot of work to be done before this issue is fixed, there are a lot of other issues that need to be addressed before this one can be solved. How should founding work then? Will the one person that presses the resolve button on Vue3 support get all the money?
You can use donations like this for small, distinct features. But then they are not donations, you can simply pay a developer to fix that stuff. My only contribution to this project so far was paid work, paid by an undisclosed company that uses BootstrapVue in a project and required this special feature.
Is it? That's exactly what I did for now. As long as there is no official BootstrapVue support, I just wrote the components myself. But only the ones required for that particular project, which is a subset of bootstrap vue.
I'd argue there is a considerable difference in coding effort between writing a modal component for a specific project and writing a fully re-usable generic modal component having all the features it could have across all possible use-cases. That's why I said it's absurd. I'd even say the vast majority of Vue developers consider writing a specific modal component a minor task but, at the same time, consider writing "the bootstrap modal" component out of their reach.
And the real problem here is not even the developer's capacity to code it. It's the company that will consider your extra effort unnecessary. Anyways, I feel the discussion has gone slightly off-topic here and. with all due respect, I don't plan on continuing it. I believe I made my point sufficiently clear. Also, I'm not expecting anyone to agree with me and disagreeing is perfectly fine :). Happy coding!
I'd love to see this issue fixed ASAP, because I want to avoid migrating from vue 2 to 3. And as I can see many people are ready to invest some time to make it happen.
But there are not clear instructions how we can help. Maybe someone can provide milestone, list of issues, or some plan, that we can follow.
Are there some serious blockers or tedious tasks? Where we can see discussion and help resolving it? I can invest few hours per week.
I'd love to see this issue fixed ASAP, because I want to avoid migrating from vue 2 to 3. And as I can see many people are ready to invest some time to make it happen.
But there are not clear instructions how we can help. Maybe someone can provide milestone, list of issues, or some plan, that we can follow.
Are there some serious blockers or tedious tasks? Where we can see discussion and help resolving it? I can invest few hours per week.
I had the same issue as you, 3 days ago. Here's how I approached it:
- joined the BootstrapVue discord
- asked who I need to speak with
- followed instructions on screen...
Bottom line: I'm now a happy contributor to BootstrapVue and have all intentions of keeping it that way.
As far as current state of BootsrapVue + Vue 3 implementation goes, I feel I'd be the least qualified to give an update. @jackmu95 is the man with the plan.
I'am currently in the process of preparing the v2.22.0 release which will include a lot of enhancements and fixes a lot of issues that came up lately. When this is done, I will re-apply the changes from the v3-dev branch to the current state of the dev branch.
After that I will keep you all updated what is working and what is still missing for Vue 3 support.
I'am going to create concrete TODOs in the v3.0.0 project so that people who want to contribute can pick one and work on it.
@jackmu95 is there any rough timeframe that you can give? Is it weeks or more like months until a usable v3 version is going to be available? Please don't take this as me pressuring, I just want to know in order to plan for my projects.
A alpha/beta of BootstrapVue v3 should be more like a few weeks away but a stable version that I would consider production ready is a few months away (end of Q1, early Q2).
Since we don't opt for a complete re-write it can be the case that it will be ready earlier than expected.
But otherwise there can always be some issues that take more time than expected.
There are also other parts like Nuxt.js v3 support and the documentation that need updates.
Overall it's difficult to say, but this is my rough estimation for now.
Last response on this issue is almost a month ago :) Because I needed Vue 3 combined with Bootstrap Vue I came across this issue.
First things first: Thanks to all the members and contributors for all the hard work!
Are there any updates on this one? It seems that branch v3-dev wasn't updated since december. I can't find a relevant roadmap tho.
I tried to install v3-dev on a fresh Vue 3 instance, but didn't get it running. But maybe I should read the docs better, so I'll do some more investigating.
When we can expect Vuejs 3 support coming?
As the v3-dev branch and discord are not very chatty about what's going on, I took some time to check what's actually involved for a very basic upgrade to Vue3: #6513 . This is more of a PoC than anything else of course, but might give at least some sort of overview what's involved in the change. It only shows the tip of the iceberg, but might be helpful π Also I couldn't find anything on the tasks / plans of what needs to be done, so I thought I might check it myself to get it going π€
Thanks @tweichart! That is a great example.
Not sure if this should go into that PR or this thread, let me know if it makes more sense in the PR. I think a lot of the breaking changes can be worked around similarly to the way you wrapped Vue.extend, by building a more advanced Vue.extend proxy that handles a lot of the conversion automatically. For example, since all components currently expect render to look like render(h, context), the Vue.extend wrapper could wrap that old behavior something like the following:
import { h } from 'Vue'
// obviously this would require a lot more, but just an example
Vue.extend = ({ render, ...rest }) => defineComponent({
render() {
return render(h, this)
},
...rest,
})Similarly for some other functions, we could write proxies that simulate the old behavior and swap them out with global find + replaces.
That kind of strategy could work to get a migration going quickly to have a working next branch, and contributors could slowly move components over to the "right" way.
@Shamus03 Porting is not that easy. A lot of vue internals (refs, portals, β¦) have changed and this would require a lot of re-writing.
@Shamus03 I was thinking the same, yes. Might be a bit problematic though, as for example the object that is passed to Vue.extend vs defineComponent changed in structure though (e.g. the directives and many others) and you'd be quite busy with all the mapping as well. Not to speak of the methods themselves inside, that either require some more parameters or need other functions from a different scope now. Also by mapping all that back and forth, the performance and package size won't be benefitting much I'd assume. There's a reason why vue3 chooses to have actual (multiple) instances of the application, so I'd assume by creating a wrapper you'd run into a whole other bunch of problems then. I didn't check in detail what it takes to be compatible to vue2 and vue3 at the same time now, but it seems like all major projects rather kick out vue2 and maintain two branches for a rather long time (dev for vue2 & next for vue3) than adding some sort of layer in between.
Anyways worth looking into of course, you're right. At least if the plan is to just have vue3 support in v4 and do a whole rewrite in v5 anyways (and therefore kick out the compatibility layer) it's legit to check at the very least.
Starting a new project now and not using Vue3 would a shame. V3 is better than V2, it's cleaner, easier to work with, plays nicer with Typescript and has some neat new features. Converting a production project down the road from Vue2 to Vue3 would be quite a hassle and sticking with Vue2 is not optimal since it will become obsolete sooner than later as libraries and tools are moving to Vue3 by default.
I tried looking for replacement for BootstrapVue that supports Vue3 and the only reasonable one I could find is Element Plus (they all probably struggle with same porting issues as BV), but I like and am familiar with Bootstrap, so I'm reluctant to switch.
Personally, I gave up on waiting for BootstrapVue and started creating my own Vue components wrappers around Bootstrap V5. As I see it, the main two points of BV are [1] removing the redundant dependency on jQuery and [2] providing a Vue friendly component API.
With Bootstrap V5, the first point is mostly irrelevant since Bootstrap V5 no longer requires jQuery and provides its own independent js library, so it can be mostly used as-is and plays nicely with Vue. With how things look, it's still a long way until BootstrapVue supports Bootstrap V5, and V5 will be out of beta and become the standard before it happens.
My strategy is to create the Vue Bootstrap components as I go when I need them. I'm trying to stick to the BootstrapVue API as close as possible in case I want to switch back to BootstrapVue when it supports Vue3/BS5, though this looks less and less likely as I progress.
The task turned out to be easier than I thought since the components are much slimmer now with Bootstrap's V5 js API. Some components are pretty simple to convert (like button and link) and others prove to be more challenging (like table) but still reasonable. I use the BV source code and its output markup as hints and guidelines.
I know I will be missing some of BootstrapVue's added value components that are missing from Bootstrap but I'll deal with it when I need them, either by creating my own or incorporating existing code from the Bootstrap ecosystem.
Overall, for my needs, I think this will be more efficient and future compatible than using Vue2 now, switching to Vue3 and next BootstrapVue when it comes out and then switching again for Bootstrap V5.
In my opinion, the best course for BootstrapVue project is to skip Vue3/Bootstrap4 altogether and to focus on Vue3/Bootstrap5. I'm far from being an expert on the inner workings of Vue/BootstrapVue and only created few components myself but intuitively it feels this would be better for the BootstrapVue project overall.
@danielvy yes I also need Vue3+Bootstrap5 project.
@danielvy @ayoubkhan558
You're capable of doing this by yourself.
npm install bootstrap@next
npm install --save @popperjs/core
Dont forget to import to main.js
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap";
@VladislavPVI I think he means is bootstrap-vue support Vue 3.
Cause I am waiting too.
@danielvy @ayoubkhan558
You're capable of doing this by yourself.
npm install bootstrap@next
npm install --save @popperjs/core
Dont forget to import to main.js
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap";
I'll try this way, thanks π