Vue-multiselect - Vue3 - Slots not working

I'm trying to recreate the following example from Vue-multiselect document in Vue 3 but I can't seem to make it work.

<multiselect 
  v-model="value" 
  :options="options" 
  :multiple="true" 
  :close-on-select="false" 
  :clear-on-select="false" 
  :preserve-search="true" 
  placeholder="Pick some" 
  label="name" 
  track-by="name" 
  :preselect-first="true">
  <template slot="selection" slot-scope="{ values, search, isOpen }">
    <span 
      class="multiselect__single" 
      v-if="values.length" 
      v-show="!isOpen">
        {{ values.length }} options selected
    </span>
  </template>
</multiselect>`

The documentation states that "Documentation for v3.0.0 is the same as for v2.x as it is mostly backward compatible." As there's no specific examples or notes about using slots in Vue 3 I thought that if I changed the component name from 'multiselect' to 'VueMultiselect' it would work but it's not.

The select part is working just fine but when I close the dropdown the custom template doesn't show. It's just the normal tags.

Am I missing something or is the feature not fully migrated to Vue 3?

Solution

VueMultiselect's documentation concerning named slots is out of date when it comes to Vue 3 syntax. slot and slot-scope attributes were deprecated in Vue 2.6 (but will continue to be supported in Vue 2.x going forward), and have been completely removed in Vue 3. Your slot in Vue 3 should be written like so:

<template v-slot:selection="{ values, search, isOpen }">

or short-hand:

<template #selection="{ values, search, isOpen }">

Documentation with more information: Named Scoped Slots in Vue 3