Slots

To ensure maximum flexibility, this component provides multiple <slot />s in order to allow for more customization.

INFO

If you are not familiar with Vue's slots, you can read more about them here.

option

Type: slotProps: { option: Option }

Customize the rendered template of an option inside the menu. You can use the slot props to retrieve the current menu option that will be rendered.

<template>
  <VueSelect v-model="option" :options="options">
    <template #option="{ option }">
      {{ option.label }} - {{ option.value }}
    </template>
  </VueSelect>
</template>

value

Type: slotProps: { option: Option }

Customize the rendered template if a selected option (inside the select control). You can use the slot props to retrieve the current selected option.

<template>
  <VueSelect v-model="option" :options="options">
    <template #value="{ option }">
      My value is: {{ option.value }}
    </template>
  </VueSelect>
</template>

tag

Type: slotProps: { option: Option, removeOption: () => void }

When using isMulti prop, customize the rendered template of a selected option. You can use the slot props to retrieve the current selected option and a function to remove it.

<template>
  <VueSelect
    v-model="option"
    :options="options"
    :is-multi="true"
  >
    <template #tag="{ option, removeOption }">
      <span>{{ option.label }} <button type="button" @click="removeOption">&times;</button></span>
    </template>
  </VueSelect>
</template>

menu-header

Type: slotProps: {}

Customize the rendered template for the menu header. This slot is placed before the options.

<template>
  <VueSelect v-model="option" :options="options">
    <template #menu-header>
      <div>
        <h3>My custom header</h3>
      </div>
    </template>
  </VueSelect>
</template>

no-options

Type: slotProps: {}

Customize the rendered template when there are no options matching the search, inside the menu.

<template>
  <VueSelect v-model="option" :options="options">
    <template #no-options>
      No options found.
    </template>
  </VueSelect>
</template>

dropdown

Type: slotProps: {}

Customize the rendered template for the dropdown icon. Please note that the slot is placed inside the button, so you don't have to deal with attaching event-listeners.

<template>
  <VueSelect v-model="option" :options="options">
    <template #dropdown>
      <MyCustomIcon />
    </template>
  </VueSelect>
</template>

clear

Type: slotProps: {}

Customize the rendered template for the clear icon. Please note that the slot is placed inside the button, so you don't have to deal with attaching event-listeners.

<template>
  <VueSelect v-model="option" :options="options">
    <template #clear>
      <MyCustomIcon />
    </template>
  </VueSelect>
</template>

loading

Type: slotProps: {}

Customize the rendered template when the select component is in a loading state. By default, it displays a <Spinner /> component.

<template>
  <VueSelect
    v-model="option"
    :options="options"
    :is-loading="true"
  >
    <template #loading>
      <MyCustomLoadingComponent />
    </template>
  </VueSelect>
</template>