feat(compat): add Vue 3 support via @vue/compat, round 2 (fixes #5196) #6905
Conversation
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/bootstrap-vue/bootstrap-vue/AP9rnnFFga1HMqX9GxTngzbShiMk |
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 6ef2ba4:
|
Codecov Report
@@ Coverage Diff @@
## dev #6905 +/- ##
==========================================
Coverage 100.00% 100.00%
==========================================
Files 299 305 +6
Lines 10265 10452 +187
Branches 2527 2550 +23
==========================================
+ Hits 10265 10452 +187
Flags with carried forward coverage won't be shown. Click here to find out more.
Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here. |
xanf
force-pushed
the
vue3-compat-build
branch
from
2b18550
to
3808529
Compare
xanf
force-pushed
the
vue3-compat-build
branch
from
3808529
to
0934f74
Compare
xanf
force-pushed
the
vue3-compat-build
branch
from
7e9966e
to
58054f1
Compare
xanf
force-pushed
the
vue3-compat-build
branch
from
58054f1
to
df27815
Compare
xanf
force-pushed
the
vue3-compat-build
branch
from
df27815
to
443b82d
Compare
xanf
force-pushed
the
vue3-compat-build
branch
from
443b82d
to
5c5092e
Compare
|
What does this need to be merged? Looking forward to restart using bootstrap-vue with vue 3! |
|
If you visit b-popover-advanced demo and click on button then we get below error: I am also getting the same error in a few other areas in my project. Thanks. |
|
Please merge and publish this PR to npm but with |
|
https://6253cfb04272251095ef217a--clever-dasik-1a4bcc.netlify.app/ just update const originalVModelDynamicCreated = Vue.vModelDynamic.created;
const originalVModelDynamicBeforeUpdate = Vue.vModelDynamic.beforeUpdate;
Vue.vModelDynamic.created = function (el, binding, vnode) {
originalVModelDynamicCreated.call(this, el, binding, vnode);
if (!el._assign) {
el._assign = () => {};
}
};
Vue.vModelDynamic.beforeUpdate = function (el, binding, vnode) {
originalVModelDynamicBeforeUpdate.call(this, el, binding, vnode);
if (!el._assign) {
el._assign = () => {};
}
};Some components are still not run properly
|
|
@sadeghbarati thank you for givin this a try and catching couple bugs! However, rewrite to |
|
one thing I forgot to mention:
If your team separate vue 2&3 of bootstrap-vue would be so better I do not expect much from you at this time because I am a little aware of the situation you are in now in Ukraine These are my thoughts ppl can easily contribute and help ur team along:
|
|
How can I help moving this over the finish line? :) |
|
Seems to me that it would be easier to create a separate project for vue3+bootstrap5 instead of creating this frankenstein thing trying to update existing code. Leave the current project as is and don't worry about cross compatibility. That's my 2 cents anyways. |
This comment was marked as resolved.
This comment was marked as resolved.
What about the people that are already using this on their project? |
What about them? They can keep on using it. |
|
That mean they are going to stuck with Vue 2 forever. They can't upgrade to Vue 3 due to Bootstrap Vue is not compatible and they can't switch to that new library too due to it is Vue 3. |
* use own extend instead
xanf
force-pushed
the
vue3-compat-build
branch
from
bb0d801
to
6ef2ba4
Compare
|
@xanf Hey there, I just wanted to let you know that I'd still like you're input on a merger if you don't mind. A few members have been in a discord dm, but I would like you're approval on some possible ideas, if you don't mind. |
I've added you on discord, sorry, too many things on the table, feel free to DM me |
|
Hey, one small report: Icons defined locally in components do not work. They only work when registered globally 🙂. |
|
@dword-design thank you. May I ask you to create a reproduction in https://stackblitz.com/edit/bootstrap-vue-with-compat?file=components/HelloBootstrap.vue if possible? |
|
@dword-design Got it. Unfortunately this is an upstream issue, I've opened issue in core - vuejs/core#6950 |
|
A single "Merge" for a human, a step forward for entire 🚀 |
|
Great work @xanf! 🎉 |
|
Awesome! Thank you so much for your hard work @xanf! |
|
Amazing! @xanf |
|
That's great, thanks for the good work! @xanf Just one remark: I tried to upgrade to 2.23 for a Vue 2 project and there were some errors (e.g. this.$store undefined). I could imagine that the release breaks in some ways for Vue 2 projects. Probably all related to @vue/compat. |
|
@dword-design that's super weird, I will be happy to see issues because there should be no major changes when you're not using @vue/compat. |
|
@xanf It was actually not possible for me find a minimal working example for me because it worked at other places. So I'd say let's wait what is happening the next days. |
|
The current version of Popper being used (1.16.1) is depreciated. Will it be updated eventually? JC |
|
Really awesome news! Thank you, thank you, @xanf for your hard work in these difficult circumstances 🙋♂️! |
|
That's great ! Thank you so much for your hard work ! |
|
The current version of Popper being used (1.16.1) is depreciated. Will it be updated eventually? Just curious if that's something that's on the table. Not sure if it's possible w/ Bootstrap 4. |
❓ What is it?
Version of Bootstrap-Vue which works for Vue 2 and Vue 3 (using
@vue/compat)Helps people with #5196
Demo using Vue 2
Demo using Vue 3
Additionally, it passes all (well, almost all, tiny fraction of tests are disabled because they are irrelevant for vue 3) tests in the test suite (it would be literally impossible to do this migration without a test suite)
This package uses vue 3 by default. If you want to run tests, build, etc. using vue 2 pass
USE_VUE2=1environment variable❗ How is this possible?
The heart of this PR consists of two parts:
@vue/compatbut for testsbootstrap-vue🔧 How could I run it?
If you want just to play around - you can clone https://github.com/xanf/bootstrap-vue3-demo which has all required setup. If you want to try it on your own project, there is some setup required.
I'm skipping setup of
@vue/compat, it is described in migration guideYou will need to monkey patch your Vue 3 a bit somewhere early in your app:
See vuejs/core#4121 for details
If your intention is to run your app in
{ MODE: 2 }(default @vue/compat) you're done.If you want to have
{ MODE: 3 }(so all compats are disabled by default), additional setup is needed:@vue/compatbuild with this fix included. https://github.com/xanf/bootstrap-vue3-demo already has patch insidepatchesfolder for that, installed by patch-packageGLOBAL_EXTEND,GLOBAL_MOUNT- for usingnew Vueinsidebootstrap-vueCOMPONENT_FUNCTIONAL,RENDER_FUNCTIONCUSTOM_DIR(anywhere where you use bootstrap-vue directive)If you use
portal-vue(which is still used for tooltips, etc.) you will need:GLOBAL_SETIf you use old (for Vue 2) version of vue-router you will need:
CONFIG_OPTION_MERGE_STRATSGLOBAL_PRIVATE_UTILGLOBAL_PROTOTYPEINSTANCE_EVENT_HOOKSOPTIONS_DESTROYEDINSTANCE_EVENT_EMITTER💣 What might not work
Nuxtrun using newer Nuxt 3, bridge, etc. but it was very problematic. So I wrote a script, which extracted demos from docs and generated https://github.com/xanf/bootstrap-vue3-demo with all demosLet's treat this one as "bridge" version
Based on this branch I will create another one, which will be focused solely on full vue 3 compatibility (without using @vue/compat). While this will definitely take time, right now I do not see any major obstacles in gradual migration
🤗 That's cool, how could I say "thank you"?
You're welcome, it's all about opensource. However, there are certain things, where your help will be appreciated:
PR checklist
What kind of change does this PR introduce? (check at least one)
fix(...), requires a patch version updatefeat(...), requires a minor version updatefeat(...), requires a minor version updatefix(...), requires a patch or minor version updatechore(docs), requires a patch version updateDoes this PR introduce a breaking change? (check one)
The PR fulfills these requirements:
devbranch, not themasterbranch[...] (fixes #xxx[,#xxx]), where "xxx" is the issue number)fix(alert): not alerting during SSR render,docs(badge): update pill examples,chore(docs): fix typo in README, etc.). This is very important, as theCHANGELOGis generated from these messages, and determines the next version type (patch or minor).If new features/enhancement/fixes are added or changed:
If adding a new feature, or changing the functionality of an existing feature, the PR's
description above includes: