Support for Vue 3?

[patras1]

Hi!! I'm having those warnings and error after basic instalation:

Is it related to the fact its Vue 3 or if not... How can I resolve this issue?

Thanks!! Dan

[saintplay]

It is related to Vue 3, no relevant clues how to resolve this for now. Other libraries are facing the same problem

[ConceptCodes]

Hey, I'm receiving the same error is there a workaround for it.

[saintplay]

Not for now, I will try to update the codebase to Vue3 this weekend

[Is0tope]

Hi there. Just checking if there is any plan to migrate this in the end? I'd love to use this, but can't get it to work with Vue3.

[bcpletcher]

Also hoping there will be support for Vue3 soon, id hate to have to find an alternative option after using this for so long

[ismael7]

excellent project, hope you update it to vue 3

[wobsoriano]

For the meantime if y'all wanna use it in Vue 3, you can check the implementation here https://codesandbox.io/s/v-swatch-vue3-2cj2w

It uses https://github.com/privatenumber/vue-2-3

[faaizajaz]

@wobsoriano Thanks for this. Your example only partially works as far as I can tell...I am not seeing the selected color logged anywhere in the console.

EDIT: Seems like this is a problem with Codepen? The example works fine locally. Thanks again.

[cuteCloud]

great project, but hope vue 3 !!thanks!!

[wobsoriano]

great project, but hope vue 3 !!thanks!!

Published a Vue 3 copy of this for the meantime https://github.com/wobsoriano/vue3-swatches

[wobsoriano]

@wobsoriano Thanks for this. Your example only partially works as far as I can tell...I am not seeing the selected color logged anywhere in the console.

EDIT: Seems like this is a problem with Codepen? The example works fine locally. Thanks again.

https://github.com/wobsoriano/vue3-swatches

[faaizajaz]

@wobsoriano Awesome. Is this a drop in replacement? I'd love to get the vue-2-3 package out of my dependencies.

[wobsoriano]

@wobsoriano Awesome. Is this a drop in replacement? I'd love to get the vue-2-3 package out of my dependencies.

Yup!

[adamprocter]

I have been using the vue 3 fork but am attempting the same trigger for calling a custom method but it is not being called I was wondering if you had any insight based on the original implementation which was working for me in vue2 here is new component (LINE 15) https://gitlab.adamprocter.co.uk/nn/nodenoggin-vue3/-/blob/main/src/components/MyNodes.vue and here is old component using vue 2 swatches (LINE 134) https://gitlab.adamprocter.co.uk/nn/nodenoggin/-/blob/main/app/src/components/NodesLayer.vue

[adamprocter]

cant see why this doesnt work for vue3

<VSwatches
          v-model="nodes.node_color"
          :swatches="swatches"
          :shapes="shapes"
          @input="chooseColor(nodes.node_id, nodes.node_color)"
          show-border
          show-fallback
          fallback-input-type="color"
        >
          <template v-slot:trigger>
            <button @click.prevent>{{ nodes.node_color }}</button>
          </template>
        </VSwatches>

and the method

chooseColor(nodeid, color) {
      this.$store.dispatch('colorNode', { nodeid, color })
      setTimeout(this.loadData, 500)
    },

[adamprocter]

thank you have posted my code on the other repo issues for completeness

[joelpro2]

@adamprocter one of the reasons is because the v-model have some breaking changes. In Vue 2 the defaults were prop: 'value', event: 'input'. In Vue 3 the defaults are prop: 'modelValue', event: 'update:modelValue'

While on Vue 2, you could change your default event, in Vue 3 you cannot.