Vue 3 compatibility

[DanelGorgan]

Description

Adding basic example from the website doesn't work on Vue 3 setup.

Steps to reproduce

1. npm install ""
2. copy paste the example
3. start the server

Expected behaviour

To work?

Actual behaviour

selfhook.bind is not a function

Does this library have vue 3 compatibility? Or maybe I'm missing something? Thank you.

[netzpixel]

Any updates? I need this like now ... :)

[rasmuscnielsen]

For anyone in urgent need to upgrade their applications to Vue 3 and continue to use this component, I used this very hacky, temporary but fairly simple solution:

Introduce a local wrapper component such as MultiSelectInput.vue:

<template>
    <Multiselect class="MultiSelectInput" v-bind="$props" :value="modelValue" @input="$emit('update:modelValue', $event)" />
</template>

<script type="text/babel">
import Multiselect from './Multiselect'

export default {
    components: { Multiselect },

    props: {
        modelValue: {},
        placeholder: {},
        options: {},
        label: {
            default: 'name',
        },
        closeOnSelect: {
            default: false,
        },
        selectLabel: {
            default: '',
        },
        trackBy: {
            default: 'id',
        },
        multiple: {
            default: true,
        },
        taggable: {
            default: false,
        },
        hideSelected: {
            default: true,
        },
       // You may need to add more inputs here - this above is just my preferred default config
    },

    emits: ['update:modelValue'] // add more events here as needed. Make sure to propagate them in your template
}
</script>

Copy/paste the MultiSelect.vue from this package to your project in the same folder as the above MultiSelectInput.vue file.
Now make just a few changes in the file:

Change imports

import { multiselectMixin } from 'vue-multiselect'
import { pointerMixin } from 'vue-multiselect'

Add emits

emits: ['input', 'search-change', 'select', 'remove', 'open', 'close', 'tag'],

Refactor usages
Finally refactor your code to use your own local wrapper instead :-)

And that's should do the trick!

Hope this comes in handy for someone else out there waiting for an official update :-)

[balintfuzes]

I've switched to @vueform/multiselect a couple of days ago - it has almost the same features and supports Vue 2 & 3. I can only recommend it so far!

[netzpixel]

@balintfuzes Thank you. Looks good on the first try.

[OliverGrimsley]

Thanks @balintfuzes I am going to test that one and possibly move over - sadly this plugin seems to have died on the vine - I have not seen an NPM update for over a year, lots of pull requests, hundred of open issues etc. Too bad.

[netzpixel]

Ok, I invested some time with @vueform/multiselect. It mostly works, but I couldn't find a reset function... emptying the v-model object doesn't clear the selected values from the component,... so it's basically unusable for me. Besides that, the default CSS is... well,.. not great. Elements breaking out of their borders, strange margins and some other little things... I'll stick with this multiselect lib for now with all my workarounds for vue3... search doesn't work for me atm, but the rest I need does.

[balintfuzes]

@netzpixel you may check out the latest release, it is fixed in it

[netzpixel]

@balintfuzes what exactly got fixed? I have quite some issues with that lib. I can’t see any way to clear all selections with the last version for example.

[balintfuzes]

@netzpixel Now it syncs with v-model. Also I think the method you’re looking for to reset is called ‘clear’

[netzpixel]

@balintfuzes Thanks, it really works better now. The CSS issues remain, but that's easy to fix. I just wish the placeholder text would be on the input field itself so it would stay even with selected tags.That way there is just a big blank position with just looks ugly...

[balintfuzes]

@vincerubinetti You mean vueform/multiselect, right? That's a different library I was proposing. Here still nothing happened as far as I can see, but I've already switched to the other one anyway.

[mattelen]

We've just published a Vue 3 Upgrade of the multiselect component here: https://github.com/SuadeLabs/vue3-multiselect. The idea is that it is a simple replacement for this component, without needing to tweak anything. It might be too late to help if you've already switched to vueform, but thought I'll pop it in here for future readers

[taylormaguire]

We've just published a Vue 3 Upgrade of the multiselect component here: https://github.com/SuadeLabs/vue3-multiselect. The idea is that it is a simple replacement for this component, without needing to tweak anything. It might be too late to help if you've already switched to vueform, but thought I'll pop it in here for future readers

This is a huge lifesaver. took very little for me to convert my existing code over. Looking forward to official support one day but this works.

[shentao]

Thanks to @mattelen, we just released v3.0.0-alpha.1 under the next tag. See https://github.com/shentao/vue-multiselect/tree/next

[sthuber90]

Thank you for the great component, @shentao . It's been over a year. When can we expect an official vue3 release (not alpha) 😄

[shentao]

Good question! I’ve been pretty much absent from the OSS work for more than a year and its surprisingly hard to get back to it. If someone is willing to help out with the maintenance or pushing the new version to stable, I’m completely open to that.

[sthuber90]

I'm very new to Vue, so I won't be of much help in maintaining the project but hopefully somebody will come forward to support you here ❤️