Vue3 Composition API

[diogofm7]

I'm trying to use Multiselect with vue3, using composition API and I'm getting errors.

[mattelen]

Can you confirm what version of the multiselect you are using? Only version 3 supports Vue 3

[diogofm7]

Você pode confirmar qual versão do multiselect você está usando? Apenas a versão 3 suporta Vue 3

npm install vue-multiselect@next

"vue-multiselect": "^3.0.0-alpha.2",

[diogofm7]

Making some tweaks changed the error.

[cdroege]

We saw similiar errors when migrating our codebase to Vue3. In our codebase, this was caused by defining __VUE_OPTIONS_API__ as false (see the Vue3 documentation about this flag). When defining this as true, we could use vue-multiselect with the Composition API again.

This results in a small increase of the bundle size (about 2kb in our case).

@diogofm7 Did you also disable the Options API via this flag?

[akki-jat]

@diogofm7 Please also provide reproducible repo link.

[AlyssonBarbosa]

The same problem for me

[Wadhah-Sky]

I managed to solve this issue by updating to:

"vue-multiselect": "^3.0.0-beta.1"

Run:

npm install vue-multiselect@next --save

Register the component and its style in :

main.js

import 'vue-multiselect/dist/vue3-multiselect.css';
import {Multiselect} from 'vue-multiselect';

// Create vue App.
const app = createApp(App);

// Add component to app
app.component('multi-select', Multiselect);

Now, use the <multi-select /> directly in your project views or use customized component, e.g. :

MultiSelectComponent.vue

<template>

  <div>
    <multi-select v-model="value" :options="props.options" ></multi-select>
  </div>

</template>

<script>
/*
  Libraries, methods, variables and components imports
*/
import {ref, defineProps} from 'vue';

export default {
  name: "MultiSelectComponent"
}
</script>

<script setup>

/*
  Define handlers (properties, props and computed)
*/
const props = defineProps({
   options: {
     type: Array,
     required: true
   }
 });
const value = ref(null);

</script>

<style scoped>

.multiselect{
  width: 38vmin;
  font-size: 12px;
}

</style>

finally, you can import this customized component into your project views and provide list of options:

<template>
  <div>
     <multi-select-component :options="[1,2,3]" />
  </div>
</template>

[wongyat88]

Any luck to help? I am using vite and ts. I tried TS with same error. And I tried @Wadhah-Sky 's answer, still same error.

Any one who face this issuse, the fix is to restart the dev server. As I installed the 2.1.7 version first and later install the 3.0.0 beta2 version, seem something crash if not restarting the server.