Vue-multiselect: 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...