Vue 3 Support

[marshallswain]

This issue is for tracking progress towards Vue 3.

• [x] Switch to use vue-demi and make sure all tests pass.
• [x] Check components for breaking changes for Vue 3 (v-model, attr.sync, full list)
  • [x] FeathersVuexCount
  • [x] FeathersVuexFind
  • [x] FeathersVuexFormWrapper
    • [x] Added emits array at top level for Vue 3 events.
  • [x] FeathersVuexGet
  • [x] FeathersVuexInputWrapper
  • [x] FeathersVuexPagination
    • [x] Changed value prop to modelValue.
    • [x] Added model configuration for Vue 2. Changed the default prop to modelValue.
    • [x] Now emits both the input event (for backward compatibility with Vue 2) and the update:modelValue event for Vue 3.
• [x] Create Vue3-style plugin that uses app.use instead of Vue.use
  • [ ] Docs for new Vue plugin
• [x] Make sure it works with Vuex 4
  • [ ] Docs for usage with Vuex 4
• [x] How do we handle utils.js and other places where we import Vue from 'vue'?
  • [x] Answer: Lerna monorepo.
• [x] Implement branching logic so that the cloneWithAccessors utility is only used for Vue 2. @marshallswain
• [x] Create Lerna monorepo
  • [x] feathers-vuex package for Vue 2
  • [x] @feathersjs/vuex package for Vue 3
  • [x] @feathersjs/vuex-commons package for sharing code between the two versions.
• [ ] Update root README.md to include instructions for using Lerna
• [x] For Vue 2 version
  • [x] Move current mutations into feathers-vuex-vue2
  • [x] Pass mutations into the call to prepareMakeServicePlugin
  • [x] Move cloneWithAccessors to utils-vue2.ts
  • [x] Pass updateOriginal utility into wherever it should be used.
  • [x] Get existing tests to pass
• [x] For Vue 3 version
  • [x] Implement new mutations
  • [x] Pass mutations into the call to prepareMakeServicePlugin
  • [x] Implement updateOriginal utility for Vue 3
  • [x] Create replacement for cloneWithAccessors.
  • [ ] Write tests for Vue 3. (make sure merge and deletes work well)
• [x] Example Vue 3 app with Vite
• [ ] Example Vue 2 app with Vue CLI
• [ ] Example Nuxt app with SSG

[marshallswain]

Breaking Changes

Package name

For Vue 3, the package name must be changed from feathers-vuex to @feathersjs/vuex.

v-model Compatibility

This will definitely be a breaking change due to the changes in the component v-model syntax. However, we will break as little as possible in this release. FeathersVuexPagination is the only component that uses v-model. To prevent v-model usage from breaking, the component will be updated to have a model property like this:

{
  model: {
    prop: 'modelValue'
  }
}

This means that any usage of v-model="someVal" will not break for Vue 2 apps. However, usage like :value="someVal" will need to be changed to :modelValue="someVal"

Event Compatibility

The component will now emit both the input and the update:modelValue events to be compatible with both versions of Vue.

New Features

Customize the injected property name

Instead of always having to use this.$FeathersVuex (or Vue.$FeathersVuex in Vue 2), you can now pass an alias attribute to the FeathersVuex plugin options. The provided string will work alongside $FeathersVuex.

[tasker204]

Super excited for this. Any idea on timeline for completion?

[briancbarrow]

@marshallswain thanks for taking this on! I'm super excited for it!

[marshallswain]

Hey, @briancbarrow and @tasker204, I'm glad you're excited. I'm testing it out on my production apps, right now. I'm running into some issues with SSG and hydration, and I don't think feathers-vuex is the problem, but I need to confirm and figure out solutions before I can publish. Plus with the Nuxt 3 announcement next week, I'd like to make sure it works with that, too, and not have to do another breaking release because of some tiny change. So it's at least a week away. You can definitely test @feathersjs/vuex right now. It seems to work great in plain PWAs.

[briancbarrow]

@marshallswain awesome! I'll see if I can give it a try this weekend.

I'm pretty new to FeathersJS. Is there anything special I'll need to do to get it working with the vite app i just started up?

For example, i saw this in the description above:

Example Vue 3 app with Vite

Can I get access to that?

[marshallswain]

@briancbarrow you can find it here: https://github.com/marshallswain/feathers-vuex-vite-spa

[marshallswain]

Status update, I'm still testing this out in a couple of applications. I have a utility that I'm updating for the new release that will assist in working with cloned values. So far it's really working well.

[FossPrime]

UPDATE: TRY FEATHERS PINIATA https://github.com/marshallswain/feathers-pinia

---

As I'm working to catch up on Vue 3, Vuex and Feathers developments... Made this Vue 3 app on their cheap "Serverless" sandbox https://codesandbox.io/s/vue-3-worker-fibonacci-9v1li

It also uses CORS with a free runkit sandbox... so that's interesting. If it gets too annoying to update the demo sandbox I could use the container version, but that requires logging in, and cant' be embedded in websites/docs, so not as useful.

[thomasvds]

Hi @marshallswain could you kindly provide an updated status on Vue 3 compatibility? We're big fans of FeathersVuex at my company and for us this is the key lib that we wait to be compatible before we move to Vue 3. Thanks a lot 🙏

[marshallswain]

The prerelease should already work with Vue 3.   You may want to give feathers pinia a try, too. It is more like what Vuex 5 will be in the future.

On August 29, 2021, GitHub @.***> wrote:

Hi @marshallswain https://github.com/marshallswain could you kindly provide an updated status on Vue 3 compatibility? We're big fans of FeathersVuex at my company and for us this is the key lib that we wait to be compatible before we move to Vue 3. Thanks a lot 🙏

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://github.com/feathersjs-ecosystem/feathers- vuex/issues/555#issuecomment-908190798>, or unsubscribe <https://github.com/notifications/unsubscribe- auth/AAA7OWP4WUCRCDG4BNARYKDT7NFMLANCNFSM4UMXLFKQ>.

[thomasvds]

Thanks @marshallswain , we'll try it out!

[ap1969]

Hi @marshallswain

Am I correct in assuming it's the @feathersjs/[email protected] releases that support vue 3?

Thanks for your work on this.

Andy

[marshallswain]

That's correct.

On September 6, 2021, GitHub @.***> wrote:

Hi @marshallswain https://github.com/marshallswain

Am I correct in assuming it's the @@.*** releases that support vue 3?

Thanks for your work on this.

Andy

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://github.com/feathersjs-ecosystem/feathers- vuex/issues/555#issuecomment-914155187>, or unsubscribe <https://github.com/notifications/unsubscribe- auth/AAA7OWOF54GIHGKSRS5DW7TUAXMSLANCNFSM4UMXLFKQ>.

[ap1969]

Excellent, thanks Marshall

[ymarcon]

Hi @marshallswain, I can't manage to install the @feathersjs/[email protected] pre-release because npm says "Missing package version", and indeed there is no version in the package.json. Am I missing something?

[marshallswain]

If you run npm view @feathersjs/vuex, you should see that there's a 4.0.1-pre.16 published on npm.  The only way it would publish is if it had a version.  My suggestion is to install that version specifically.  Even just npm i @***@***.*** should work.

On September 13, 2021, GitHub @.***> wrote:

Hi @marshallswain https://github.com/marshallswain, I can't manage to install the @@.*** pre- release because npm says "Missing package version", and indeed there is no version in the package.json. Am I missing something?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://github.com/feathersjs-ecosystem/feathers- vuex/issues/555#issuecomment-918274475>, or unsubscribe <https://github.com/notifications/unsubscribe- auth/AAA7OWI3LQWHQKGYTAAIQM3UBYF4PANCNFSM4UMXLFKQ>.

[ymarcon]

Oh ok, I assumed the pre-release was not in npm's registry and was installing it from the tarball. Thanks!

[FossPrime]

I couldn't get the classical $FeathersVuex Vue 3 app mixin to register with @feathersjs/vuex@4. Not sure if that's intentional, I assume we should register it ourselves if we want the classical API access

https://codesandbox.io/s/xk52mqm7o

[DimitriMichel]

@marshallswain seems like the pre-release still relies on the old Composition API any plans to change this?

[marshallswain]

@DimitriMichel is there a new package for it? I thought Vue-Demi was the way to go. Enlighten me, please

[DimitriMichel]

@marshallswain Actually it turns out there was an error emitting from an unrelated dependency conflict. Thanks for the quick response though!