Vuejs 2.0 Migration

[Humeira]

I have started working on migrating vue-strap to vue 2.0, I'll be grateful if someone can create a new branch v2 here.

Some folks have show interest in migrating to 2.0 as well https://github.com/yuche/vue-strap/issues/372 https://github.com/yuche/vue-strap/issues/374

[purepear]

I just found today this one for vue 2 and bootstrap 4 https://github.com/pi0/bootstrap-vue I haven't tested it properly yet cause it's tricky to run it with vueify and without scss.. but i think if you use webpack it's good to go

[Humeira]

@purepear Yes it kind of have the same thing as vue-strap. But, vue-strap has more users I reckon it will be a really idea to start migrating this one, than moving to another completely different repo.

[Humeira]

@wffranco Hello is it possible for you to create a new branch v2 on this repo?

[yuche]

@Humeira done.

[Humeira]

@yuche cool thanks!

[wffranco]

Well, i done a vue2 branch and started the migration, not finished yet. https://github.com/wffranco/vue-strap/tree/vue2

incomplete the documentation.

[Humeira]

@wffranco can you merge to the new branch v2 with a comment of what you have done, so that we are both not working on same components.

[wffranco]

yep when i finish the migration i do the merge :smile:

[Humeira]

@wffranco you have already done most part? 🤔 i just started doing the same thing.

[psi-4ward]

so we should probably make it more transparent and list alle components in the first comment of this issue and track the progress here.

[wffranco]

I migrated all the components, but had a lot of errors in the documentation, the first one I don't understand it...

I maybe will test the components apart of the project, to know if they work right.

If you can help me to detect what happen with the docs I will appreciate your help.

[Humeira]

@wffranco where can i get your changes?

[druppy]

@wffranco I have cloned you repos, and it build nicely locally, but then i tried the vue-migration-helper, and it came up with 166 errors.

Especially all the errors related to coerce properties and twoWayneed some attention.

The Datepicker.vue has this dispatch error.

If we could find a common solution for these errors, then it is just a question of fixing the Components one at a time (make a list and spit it in 3 ?). Is it possible to work directly on your fork somehow ?

[wffranco]

Sorry I'm really busy with 2 projects, so I have no time to continue the migration right now. @druppy I run the migration helper 3 days ago in src and fix all the errors, let me check if I forgot to push the last changes.

Edit: Nope, I check and I do the last commit 2 days ago and have no migration errors, I fix all that things, even the dispatch errors... maybe need some extra adjustment for a better working, but not related with migration errors.

[ropeladder]

Can confirm that the src directory of the vue2 branch on wffranco's fork returns no errors. I'm getting a build error though because for some reason ButtonGroup.vue got renamed to buttonGroup.vue; otherwise it seems to build fine.

[purepear]

@ropeladder haven't tried it yet but might be a linux/mac/windows - uppercase/lowercase filesystem thing

[wffranco]

I think the best option is testing the components individually, maybe in a clean window... But like I said I have no time right now.

[druppy]

@wffranco Nice work !, please let me know where to get these changes, or when you have time to commit it onto the fork. I have cloned your fork, so I can test it from there.

@ropeladder how did you test that ? I still get 166 errors from the vue-migration-helper tool :-)

[ropeladder]

@druppy Just like this:

git clone https://github.com/wffranco/vue-strap.git
cd vue-strap
git checkout vue2
cd src
vue-migration-helper

[wffranco]

@ropeladder you right I renamed the buttongroup, now match with the standard in the project. But the real problem is that I comment almost all the documentation files and still not working... so I think that need to be tested one by one.

[druppy]

@ropeladder Sorry, I still need to work at my black belt as git ninja :-) git will not checkout isdist has some build js files ... sight.

So, time to test components ... thanks !

[ropeladder]

I'm trying out dropdowns and they appear to work correctly, but Vue gives a warning that they should not be mutating the value property. I don't really understand well enough how the component is built to know what the correct way to refactor would be.

[wffranco]

well, I needed select component so I fix it and fixed the helpers for supporting of laravel 5.3 (give some errors because this uses buble-loader to convert ES2015 and have some limitations).

nobody else have working over my branch? if somebody want to help just tell me or make a push request if you're done something.

Here the branch again if somebody need it: https://github.com/wffranco/vue-strap/tree/vue2

[wffranco]

According to vue2, twoway binding is not supported, except for v-model. But I think on a simple feature to make a twoway binding for any property, compatible with vue 1 and 2, but not tested yet.

[druppy]

@wffranco I have just tried to fix a few build docs errors, but I have no access to the branch :-)

ERROR: Permission to wffranco/vue-strap.git denied to druppy.

[wffranco]

make a pull request? anyway, let me see if I can add you :stuck_out_tongue: EDIT: done, try again.

[druppy]

Yes, thanks ... tried some small changes, time for some more work, now that it is not in vain :-)

Any reason for dist and build content to be added to the repos, git complains about it after a re-build.

[wffranco]

• fixed Input
• fixed select
• formGroup will be renamed to formValidator, the formGroup component will have another purpose
• reordering components for a better control of the fixes

By for now I only will fix the components I need, have a lot of work, but need some components in vue 2 (the documentation are not working, so I test and fix the components in another project).

Next to fix:

• tabs
• tabGroup
• tab
• dropdown

[webnoob]

@wffranco Is there a way to see everything that has been ported to vue2 and what is left outstanding?

I'd like to start using this in my project but need to know what's available (and I might be able to help with the migration for the bits I need personally).

Also, with regards to using the Vue2 version, how do we go about that, just npm install vue-sharp as normal or is there a special version we should be installing?

[Humeira]

@webnoob It's still a work in progress. You can find the changes on @wffranco branch vue2. If you want to see vue-strap with vue.js 2.x, just switch to that branch and do a npm install. Everything already in the package.json.

[druppy]

I have tried to fix npm run docs so that it again works and compiles against vue2, this make testing much more simple :) Hope others may find this useful too ...

[webnoob]

@druppy Thanks! I too had noticed it wasn't working and thought it might be useful to have it fixed.

Unfortunately, I don't think my knowledge is good enough with Vue / vue-strap to help out much on this at the moment so appreciate the work you guys are putting in.

[wffranco]

I finally made the docs work in vue 2. But I detected that selectDocs crash my chrome. So I commented the most of the documentations. When you enable something, try to do it one by one.

[wffranco]

Fixed:

• dropdown
• tab
• tabGroup
• tabs

Fixed, but have to check them again:

• input
• select

Input return some errors in the docs, and selectDocs crash so maybe must be something in the select component.

[druppy]

@wffranco nice with some progress :-) We ended up changing in the same part of the code, lets see if we can avoid that, in the name of progress. I had the whole docs page rendering with all exiting components, but it is ok to just enable them one at a time.

I will try to focus on the Modal then, as you are working on the other important parts.

[webnoob]

I'd be eternally grateful if someone could work on the Datepicker, my vue knowledge isn't good enough to tackle that beast!

[druppy]

@webnoob Noted :-)

[wffranco]

@druppy if you handle the datepicker I have an idea for a long time but never had time to do it, and is convert the datepicker in a wrapper, something closer to the tooltip / popover, then we can use the datepicker with an input or a button (in some mobile phones the native datepicker looks very good, so I think that in a button you can chose what datepicker to use). Or maybe can be changed to a directive... Just thinking in some options :stuck_out_tongue:

[webnoob]

Just an FYI, I'm occasionally getting this on v-select (using the vue2 branch)

vue-strap.min.js:2 Uncaught (in promise) TypeError: $(...).offBlur is not a function(…)beforeDestroy @ vue-strap.min.js:2callHook @ vue.common.js?e881:1795Vue.$destroy @ vue.common.js?e881:1759destroy$1 @ vue.common.js?e881:1968invokeDestroyHook @ vue.common.js?e881:3883invokeDestroyHook @ vue.common.js?e881:3887invokeDestroyHook @ vue.common.js?e881:3891invokeDestroyHook @ vue.common.js?e881:3891invokeDestroyHook @ vue.common.js?e881:3891invokeDestroyHook @ vue.common.js?e881:3891invokeDestroyHook @ vue.common.js?e881:3891invokeDestroyHook @ vue.common.js?e881:3891invokeDestroyHook @ vue.common.js?e881:3891invokeDestroyHook @ vue.common.js?e881:3887invokeDestroyHook @ vue.common.js?e881:3887removeVnodes @ vue.common.js?e881:3902updateChildren @ vue.common.js?e881:4009patchVnode @ vue.common.js?e881:4042updateChildren @ vue.common.js?e881:3960patchVnode @ vue.common.js?e881:4042patch @ vue.common.js?e881:4151Vue._update @ vue.common.js?e881:1689(anonymous function) @ vue.common.js?e881:1662get @ vue.common.js?e881:729run @ vue.common.js?e881:798flushSchedulerQueue @ vue.common.js?e881:616nextTickHandler @ vue.common.js?e881:396

I'm using hot reload so I don't know if that's the issue but it breaks the page from then on.

[druppy]

@wffranco I have worked a bit on the datepicker (included in docs again), and it seems to work, but select are strange and I still have a some mutate warnings, that I need to understand more.

[madr]

FWIW, I have tested the dist files in the vue2 branch in @wffranco s fork, and I noticed that the input field of the typeahead component silently ignores all keydowns and keyups: you type, but no chars appear in the input field.

I also tried to clone the repo and built the dist files locally from the last commit, but no luck there either.

I have just started with Vue and have no clue, sadly. I could take a look though if someone might give me a hint.

[wffranco]

@webnoob I don't compiled the vuestrap by for now because is not ready. I don't know if @druppy do it, but if he don't, the vue-strap.min.js will not work.

EDIT: Same responce for you @madr, the dist should be some of the last versions for vue1.

[druppy]

@wffranco I don't compile it either I use the npm run docs until all works ... hopefully soon.

[webnoob]

@wffranco @druppy I cloned the source and did "npm run build" myself so the vue-strap.min.js file should be Ok shouldn't it (assuming I stick to only those components that have been migrated). I'm not getting any other errors using those components and I would have expected a lot if I was using components that have not yet been migrated.

Anyways, I only posted that just in case it was something that had been missed. Don't let me distract your fine progress and hard work. Your efforts are appreciated.

[druppy]

@webnoob Thanks, so nice to hear, @wffranco have made a lot of this possible

[IanGrainger]

Ah - this might partly answer a question I just put on SO.com here: http://stackoverflow.com/questions/40266688/typeahead-with-vue-js-2-0 ;)

[webnoob]

@druppy @wffranco There is definitely an issue with the select component. I've updated my source and re-built. The offending line is line 242 in Select.vue $(this.$refs.select).offBlur(). I've commented the line out for now in my version whilst I'm developing but noting here so it can be tracked down later (as I know it's a component that has already been migrated)

[druppy]

@wffranco I have added a Modal that works ... once. I have changed it to let the open state be handled by the parent, as you can see in the docs. If you could give me an idea as to why it will not open second time I would be happy to fix it.

When all this is done, there may be an idea in remove the pseudo jQuery layer and make a prober Vue2 code base :-)

[wffranco]

@druppy move to the branch v2 https://github.com/wffranco/vue-strap/tree/v2

And check the input, I was working over it and you too... I mix both but I think your blur/focus events are not necessary, I was fixed that before

[druppy]

@wffranco ok, I moved to v2, and will look at input and the blur/focus events.

The Accordion.vue works for me, but the css effect are strange, any idear :-)

Select is also strange, I will try to look at its auto close function.

I try to remove as much dependency on NodeList.js as possible, and a saw @wffranco has tried to use only one single version. The more we can use Vue2 as it is intended the better :-)

Could we get a vue-strap2 gitter or something ?