Giters

feathersjs-ecosystem / feathers-vuex

Integration of FeathersJS, Vue, and Nuxt for the artisan developer

Home Page:https://vuex.feathersjs.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Vue 3 Support

marshallswain opened this issue · comments

commented

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
commented

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.

commented

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

commented

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

commented

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.

commented

@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?

commented

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.

commented

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.

commented

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 🙏

commented
commented

Thanks @marshallswain , we'll try it out!

commented

Hi @marshallswain

Am I correct in assuming it's the @feathersjs/vuex@4.0.1-pre.xx releases that support vue 3?

Thanks for your work on this.

Andy

commented
commented

Excellent, thanks Marshall

commented

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

commented
commented

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

commented

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

commented

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

commented

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

commented

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