npm install vue-superselect

<script setup lang="ts">

import { ref } from 'vue'

import {

  SelectRoot,

  SelectControl,

  SelectInput,

  SelectContent,

  SelectOption,

} from 'vue-superselect'



const selected = ref<string | null>(null)

const fruits = ['Apple', 'Banana', 'Cherry', 'Grape', 'Orange']

</script>



<template>

  <SelectRoot v-model="selected">

    <SelectControl>

      <SelectInput placeholder="Pick a fruit..." />

    </SelectControl>

    <SelectContent>

      <SelectOption

        v-for="fruit in fruits"

        :key="fruit"

        :value="fruit"

        :label="fruit"

      >

        {{ fruit }}

      </SelectOption>

    </SelectContent>

  </SelectRoot>

</template>

<script setup lang="ts">

import { onMounted, onBeforeUnmount } from 'vue'

import { useSelect } from 'vue-superselect'

import type { CollectionItem } from 'vue-superselect'



const fruits = ['Apple', 'Banana', 'Cherry', 'Grape', 'Orange']



const {

  getRootProps,

  getInputProps,

  getListboxProps,

  getOptionProps,

  isOpen,

  value,

  visibleItems,

  registerItem,

  unregisterItem,

} = useSelect<string>()



const items: CollectionItem<string>[] = fruits.map((fruit, i) => ({

  id: `fruit-${i}`,

  value: fruit,

  label: fruit,

  disabled: false,

  element: null,

}))



onMounted(() => items.forEach(registerItem))

onBeforeUnmount(() => items.forEach((item) => unregisterItem(item.id)))

</script>



<template>

  <div v-bind="getRootProps()">

    <input v-bind="getInputProps({ placeholder: 'Search fruits...' })" />

    <ul v-if="isOpen" v-bind="getListboxProps()">

      <li

        v-for="item in visibleItems"

        :key="item.id"

        v-bind="getOptionProps(item)"

      >

        {{ item.label }}

      </li>

    </ul>

  </div>

</template>

<script setup lang="ts">

import { ref } from 'vue'

import {

  SelectRoot,

  SelectControl,

  SelectInput,

  SelectContent,

  SelectOption,

  SelectTag,

} from 'vue-superselect'



const selected = ref<string[]>([])

const skills = ['Vue.js', 'TypeScript', 'React', 'Node.js', 'Python', 'Go']

</script>



<template>

  <SelectRoot v-model="selected" multiple hide-selected>

    <SelectControl v-slot="{ selectedItems, removeItem }">

      <SelectTag

        v-for="item in selectedItems"

        :key="String(item.value)"

        :value="item.value"

        :label="item.label"

        @remove="removeItem"

      />

      <SelectInput placeholder="Select skills..." />

    </SelectControl>

    <SelectContent>

      <SelectOption

        v-for="skill in skills"

        :key="skill"

        :value="skill"

        :label="skill"

      >

        {{ skill }}

      </SelectOption>

    </SelectContent>

  </SelectRoot>

</template>

interface User {

  id: number

  name: string

  role: 'admin' | 'member'

}



// v-model is correctly typed as number | null

// SelectOption slot props know about User