Vue 3 Support

[marshallswain]

This issue is for tracking progress towards Vue 3.

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