Vue3 support about ngvue

[jaredmcateer]

I was having problems writing an upgrade in this ngVue package that supported both Vue 2 and 3. I decided to re-write ngVue from with Vue 3 support only in mind, https://github.com/jaredmcateer/ngVue3/tree/main/packages/ngVue3. There are a lot of similarities as the changes between Vue 2 and 3 aren't many but the few that are aren't all trivial and it wasn't that the way ngVue was built was particularly bad in any way.

The big differences are the reactivity helpers like ref and reactive instead of Vue.set and that you can't easily add things to the global Vue object, they need to be added to the app instance, also since composables and plugins have access to lifecycle hooks by importing the functions from vue and we no longer need to add them to the instance so that's been removed. I made a way to pass through plugins and injectables. As such the plugin architecture has been reworked and is hopefully a little more simple and straight forward.

I simplified the API and didn't re-implement the vue-component directive the createVueComponent factory is the main way to create the angular directives now (I've also provided a helper function to reduce the boilerplate that pattern needs). I also didn't re-implement quirksMode (I think reactive mostly eliminates that issue).

There are no longer import/requires with side effects, everything needs to be explicitly imported (primarily useNgVue/useNgVuePlugins initialize the angular ngVue and ngVue.plugins modules and return the namespace, and ngVueComponent which is the helper to be used with the directive factory)

Filters a not a built-in plugin, they no longer work the same way in Vue 3, you can't use them as a pipe in the templates anymore (e.g., {{ 'fop' | upper }}) and it's just recommended to import them as use them like a method or computed getter. I still may come up with a way to easily inject internal angular filters but not completely decided on that.

I also rewrote the entire thing in typescript so you'll have types support in your app if you desire and should hopefully help with understanding how the codes works for the next person that comes along needing to maintain this package (though now that I understand ngVue better I will do my best to help out when I can)

Also want to thank @kas84 for their initial work, it helped kick start my learning of the code base and inspired some of the changes I made.

[kas84]

Hi,

Just in case anyone need this. I only support prop syncing and it's kind of hackish but I have working example for vue3.

https://github.com/kas84/ngVue

[jaredmcateer]

I have no good thoughts on what's involved.

The core contributors appear to have moved on and the project is receiving no active development from anyone. I contacted the owner to get member status so I could publish a fix to a memory leak. While I'm willing incorporate contributions from others my knowledge of the codebase is far from comprehensive, sorry.

[john-maddock]

did you get any time :)

[jaredmcateer]

Unfortunately I don't have a lot of spare time these days. Our project won't be upgrading to vue3 in the near future so I won't be able to justify working on it with my employer.

As always I am open to PRs

[jb0071913]

@jaredmcateer Do you (or any of the other main project contributors) have an idea of the likely tasks involved in moving this library to Vue3? We want to use the library in our project and we will be considering moving to Vue3 at some stage in the future so we may, as a team, have time to help.