### Install vue-select with Yarn or NPM

Source: https://github.com/sagalbot/vue-select/blob/master/docs/guide/install.md

Instructions for installing the vue-select package using either Yarn or NPM. Supports installation for Vue 2 (v3.x) and Vue 3 (v4.x@beta).

```bash
# vue 2
yarn add vue-select

# vue 3
yarn add vue-select@beta

# or, using NPM
npm install vue-select
```

--------------------------------

### Vue Select Options Data Structure Example

Source: https://github.com/sagalbot/vue-select/blob/master/docs/guide/values.md

An example of how options can be structured for Vue Select, including properties like 'title' and nested objects for 'author'. This structure is relevant when using the 'reduce' prop.

```javascript
const options = [
    {
        title: "HTML5",
        author: {
            firstName: "Remy",
            lastName: "Sharp"
        }
    }
];
```

--------------------------------

### Install vue-select for Vue 3 (Beta)

Source: https://github.com/sagalbot/vue-select/blob/master/README.md

Installs the beta version of vue-select, which supports Vue 3. This command uses either yarn or npm package managers.

```bash
yarn add vue-select@beta

# or use npm

npm install vue-select@beta
```

--------------------------------

### Install vue-select for Vue 2

Source: https://github.com/sagalbot/vue-select/blob/master/README.md

Installs the stable version of vue-select, compatible with Vue 2. This command can be executed using either yarn or npm.

```bash
yarn add vue-select

# or use npm

npm install vue-select
```

--------------------------------

### Vue Select Taggable and Reduce Integration Guide

Source: https://github.com/sagalbot/vue-select/blob/master/docs/guide/values.md

Explains the interaction between 'taggable', 'reduce', and 'createOption' props in Vue Select. When 'taggable' is enabled and 'reduce' is used to transform selected options into a different format, 'createOption' must be defined to specify how new tags (created by the user) should be structured to match the reduced output.

```APIDOC
VueSelectComponent:
  Props:
    taggable: boolean
      Enables users to add new options to the list.
    reduce: Function
      A function that transforms the selected option object into a different value (e.g., an ID, a formatted string).
      Example: `book => book.id` or `book => `${book.author.firstName} ${book.author.lastName}`
    createOption: Function
      Required when 'taggable' and 'reduce' are used together.
      Defines the structure of the object created for a new tag.
      This function receives the user's input text and should return an object that conforms to the structure expected by the 'reduce' prop.
      Signature: `(searchText: string) => object`
      Example: `book => ({ title: book, author: { firstName: '', lastName: '' } })`

  Usage Notes:
  - When 'taggable' is true, users can type and add new options.
  - If 'reduce' is also used, the default object created by Vue Select for new tags (e.g., `{ [label]: searchText }`) might not be compatible with the 'reduce' function.
  - Therefore, 'createOption' must be provided to ensure new tags are created with the correct properties that 'reduce' can process.
  - The 'label' prop defines which property of the option objects is displayed to the user.
```

--------------------------------

### Import and Register vue-select Component

Source: https://github.com/sagalbot/vue-select/blob/master/docs/guide/install.md

Demonstrates how to import the vue-select component and register it globally within a Vue.js application.

```javascript
import Vue from 'vue'
import vSelect from 'vue-select'

Vue.component('v-select', vSelect)
```

--------------------------------

### Browser Usage with UMD Module

Source: https://github.com/sagalbot/vue-select/blob/master/docs/guide/install.md

Instructions for using vue-select in the browser via its UMD module. This involves including Vue.js, the vue-select JS file, and its CSS file from a CDN.

```html
<!-- include VueJS first -->
<script src="https://unpkg.com/vue@latest"></script>

<!-- use the latest vue-select release -->
<script src="https://unpkg.com/vue-select@latest"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-select@latest/dist/vue-select.css">

<!-- or point to a specific vue-select release -->
<script src="https://unpkg.com/vue-select@3.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-select@3.0.0/dist/vue-select.css">
```

--------------------------------

### Register Component in Browser

Source: https://github.com/sagalbot/vue-select/blob/master/docs/guide/install.md

After loading the UMD module in the browser, this JavaScript code registers the vue-select component globally using the `VueSelect.VueSelect` global variable.

```javascript
Vue.component('v-select', VueSelect.VueSelect);
```

--------------------------------

### Register vue-select Component in Vue 2

Source: https://github.com/sagalbot/vue-select/blob/master/README.md

Shows how to import and globally register the vSelect component in a Vue 2 application. This is typically done in the main Vue instance setup.

```javascript
import Vue from "vue";
import vSelect from "vue-select";

Vue.component("v-select", vSelect);

```

--------------------------------

### Include vue-select CSS

Source: https://github.com/sagalbot/vue-select/blob/master/docs/guide/install.md

The vue-select component requires separate CSS inclusion for styling. This snippet shows how to import the default CSS file.

```javascript
import 'vue-select/dist/vue-select.css';
```

--------------------------------

### Vue Select Integration with Taggable and Reduce

Source: https://github.com/sagalbot/vue-select/blob/master/docs/guide/values.md

Demonstrates the integration of 'taggable' and 'reduce' props in a Vue Select component. It highlights the requirement for the 'createOption' prop when 'reduce' is used to ensure custom tag objects match the expected option structure.

```html
<v-select
    taggable
    multiple
    label="title"
    :options="options"
    :create-option="book => ({ title: book, author: { firstName: '', lastName: '' } })"
    :reduce="book => `${book.author.firstName} ${book.author.lastName}`"
/>
```

--------------------------------

### Single and Multiple Selection

Source: https://github.com/sagalbot/vue-select/blob/master/docs/guide/values.md

Shows how to enable multiple value selection by using the 'multiple' boolean prop. When 'multiple' is true, both the 'v-model' and 'value' prop expect an array of selected items.

```html
<v-select multiple v-model="selected" :options="['Canada','United States']" />
```

```html
<v-select multiple :options="['Canada','United States']" />
```

--------------------------------

### Vue Select Popper.js Integration Example

Source: https://github.com/sagalbot/vue-select/blob/master/docs/guide/positioning.md

Demonstrates how vue-select can integrate with Popper.js for advanced dropdown positioning. This involves using the `appendToBody` and `calculatePosition` props to leverage Popper.js's capabilities for precise element placement.

```vue
<template>
  <vSelect
    :options="options"
    :appendToBody="true"
    :calculatePosition="customCalculatePosition"
  />
</template>

<script>
import vSelect from 'vue-select';
import { createPopper } from '@popperjs/core';

let popperInstance = null;

export default {
  components: {
    vSelect
  },
  data() {
    return {
      options: ['one', 'two', 'three']
    };
  },
  methods: {
    customCalculatePosition(dropdown, context) {
      // Ensure context.el is the reference element (the v-select component's root)
      const referenceElement = context.el;

      if (popperInstance) {
        popperInstance.destroy();
      }

      popperInstance = createPopper(referenceElement, dropdown, {
        placement: 'bottom-start',
        modifiers: [
          {
            name: 'offset',
            options: {
              offset: [0, 8], // Adjust offset as needed
            },
          },
          // Add other Popper.js modifiers as required
        ],
      });

      // Popper.js automatically updates styles, so no manual style setting is needed here.
      // However, if you need to trigger an update manually, you can call popperInstance.update().
    }
  },
  beforeDestroy() {
    if (popperInstance) {
      popperInstance.destroy();
    }
  }
};
</script>

<style>
/* Basic styling for dropdown if needed, Popper.js handles positioning */
.v-select .vs__dropdown-menu {
  /* Popper.js will manage top/left */
  position: absolute;
  z-index: 1000; /* Ensure it's above other content */
}
</style>
```

--------------------------------

### Binding value Prop and @input Event

Source: https://github.com/sagalbot/vue-select/blob/master/docs/guide/values.md

Illustrates how to manually manage the selected value by binding the 'value' prop and listening for the 'input' event. This pattern is useful for integrating with state management solutions like Vuex, where direct mutation via v-model is not preferred.

```html
<v-select :value="selected" />
```

```html
<v-select :value="$store.myValue" @input="setSelected" />
```

```javascript
methods: {
    setSelected(value) {
        // Trigger a mutation, or dispatch an action
    }
}
```

--------------------------------

### Implement Custom OpenIndicator Component (JS)

Source: https://github.com/sagalbot/vue-select/blob/master/docs/guide/components.md

Provides a JavaScript implementation for a custom OpenIndicator component for vue-select. This example demonstrates rendering a custom caret using a span with a class for styling, allowing for dynamic orientation based on dropdown state.

```js
export default {
  data: () => ({
    selected: ['Canada'],
    OpenIndicator: {
      render: createElement => createElement('span', {class: {'toggle': true}}),
    },
  }),
};
```

--------------------------------

### Taggable Input Functionality

Source: https://github.com/sagalbot/vue-select/blob/master/docs/guide/values.md

Demonstrates how to enable users to input custom values that are not present in the provided options by setting the 'taggable' prop to true. The 'push-tags' prop can be used to add these custom tags directly into the options array.

```html
<v-select taggable multiple />
```

```html
<v-select taggable multiple push-tags />
```

--------------------------------

### v-model Binding for vue-select

Source: https://github.com/sagalbot/vue-select/blob/master/docs/guide/values.md

Demonstrates the primary method of syncing the selected value with a parent component using Vue's v-model directive. This works for both single and multiple selections, with v-model expecting an array when the 'multiple' prop is active.

```html
<v-select v-model="selected" />
```

--------------------------------

### Vue-select CSS Import for SSR

Source: https://github.com/sagalbot/vue-select/blob/master/docs/guide/upgrading.md

In v3.x, CSS is separated from the JavaScript bundle to better support Server-Side Rendering (SSR) and allow for easier CSS customization. Developers should explicitly import the CSS file alongside the component.

```javascript
@import vSelect from 'vue-select';
@import 'vue-select/dist/vue-select.css';
```

--------------------------------

### Implement Custom Deselect Component (JS)

Source: https://github.com/sagalbot/vue-select/blob/master/docs/guide/components.md

Provides a JavaScript implementation for a custom Deselect component, which can be passed to the `components` prop of vue-select. This example shows how to render a custom clear button using a span with an emoji.

```js
export default {
  data: () => ({
    Deselect: {
      render: createElement => createElement('span', '❌'),
    },
  }),
};
```

--------------------------------

### Transforming Selections with reduce Prop

Source: https://github.com/sagalbot/vue-select/blob/master/docs/guide/values.md

Explains how to use the 'reduce' prop to transform the selected option before it's passed to the @input event or v-model. This is useful for returning a specific key from an object or deeply nested value, rather than the entire object.

```javascript
let options = [{code: 'CA', country: 'Canada'}];
```

```html
<v-select :options="options" :reduce="country => country.code" label="country" />
```

```javascript
/*
  Example with deeply nested values:
  {
    country: 'canada',
    meta: {
      code: 'ca',
      provinces: [...],
    }
  }
*/
```

```html
<v-select :options="options" :reduce="country => country.meta.code" label="country" />
```

--------------------------------

### Vue Select Pagination with List Footer Slot

Source: https://github.com/sagalbot/vue-select/blob/master/docs/guide/pagination.md

Demonstrates how to use the 'list-footer' slot in Vue Select (v3.8.0+) to implement pagination. This slot renders content at the bottom of the dropdown list, allowing custom pagination controls. Proper integration requires handling filtering logic in the parent component.

```vue
<template>
  <div>
    <v-select
      :options="options"
      :filterable="false" 
      @search="handleSearch"
    >
      <template #list-footer>
        <div class="pagination-controls">
          <button @click="prevPage">Previous</button>
          <span>Page {{ currentPage }}</span>
          <button @click="nextPage">Next</button>
        </div>
      </template>
    </v-select>
  </div>
</template>

<script>
import vSelect from 'vue-select';

export default {
  components: {
    vSelect
  },
  data() {
    return {
      options: [], // Your paginated options
      currentPage: 1,
      searchQuery: ''
    };
  },
  methods: {
    fetchOptions(query, page) {
      // Implement your API call here to fetch paginated and filtered options
      console.log(`Fetching options for query: ${query}, page: ${page}`);
      // Example: this.options = await api.getOptions(query, page);
    },
    handleSearch(query) {
      this.searchQuery = query;
      this.currentPage = 1; // Reset to first page on new search
      this.fetchOptions(query, this.currentPage);
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
        this.fetchOptions(this.searchQuery, this.currentPage);
      }
    },
    nextPage() {
      this.currentPage++;
      this.fetchOptions(this.searchQuery, this.currentPage);
    }
  },
  mounted() {
    this.fetchOptions(this.searchQuery, this.currentPage);
  }
};
</script>

<style>
.pagination-controls {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-top: 1px solid #eee;
}
</style>
```

--------------------------------

### getOptionKey Prop for vue-select

Source: https://github.com/sagalbot/vue-select/blob/master/docs/api/props.md

Callback to get an option key. If `option` is an object and has an `id`, returns `option.id` by default, otherwise tries to serialize `option` to JSON. The key must be unique for an option.

```javascript
getOptionKey: {
  type: Function,
  default(option) {
    if (typeof option === 'object' && option.id) {
      return option.id
    } else {
      try {
        return JSON.stringify(option)
      } catch(e) {
        return console.warn(
          `[vue-select warn]: Could not stringify option ` +
          `to generate unique key. Please provide 'getOptionKey' prop ` +
          `to return a unique key for each option.\n` +
          'https://vue-select.org/api/props.html#getoptionkey'
        )
        return null
      }
    }
  }
}
```

--------------------------------

### v2 vs v3: Callback props to Events

Source: https://github.com/sagalbot/vue-select/blob/master/docs/guide/upgrading.md

Vue-select v3.x removes callback props like 'onChange', 'onInput', and 'onSearch' in favor of emitted events. This change aims to prevent internal conflicts and simplify event handling. The 'input' event replaces 'onChange' and 'onInput', while the 'search' event replaces 'onSearch'.

```html
<!-- version 2: using on-change prop -->
<v-select :on-change="doSomething" />

<!-- version 3: using @input event -->
<v-select @input="doSomething" />

<!-- version 2: using @change event (redundant) -->
<v-select @change="doSomething" />

<!-- version 3: using @input event instead -->
<v-select @input="doSomething" />

<!-- version 2: using on-search prop -->
<v-select :on-search="doSomeAjax" />

<!-- version 3: using @search event -->
<v-select @search="doSomeAjax" />
```

--------------------------------

### v2 vs v3: `index` prop to `reduce` prop

Source: https://github.com/sagalbot/vue-select/blob/master/docs/guide/upgrading.md

Vue-select v2.x used the 'index' prop (String) to extract a single key from a selected object. Vue-select v3.x replaces this with the 'reduce' prop (Function), offering greater flexibility for deeply nested values and complex data transformations.

```javascript
const options = [{country: 'Canada', code: 'CA'},];
```

```html
<!-- v2: using index prop --><v-select :options="options" label="country" index="code"  />

<!-- v3: using reduce prop --><v-select :options="options" label="country" :reduce="country => country.code" />
```

--------------------------------

### Vue Select CSS Variables for Styling

Source: https://github.com/sagalbot/vue-select/blob/master/docs/guide/css.md

Vue Select utilizes CSS custom properties (variables) to allow for flexible styling without requiring a build system. These variables enable easy customization of colors and other visual aspects, as demonstrated in dark mode examples.

```css
/* Example of overriding Vue Select CSS variables for dark mode */
:root {
  --vs-primary-color: #333;
  --vs-text-color: #eee;
  --vs-dropdown-bg: #444;
  --vs-dropdown-option-hover-bg: #555;
}

/* To apply globally, place these variables in your main CSS file. */
/* To apply locally, scope them to a parent element. */
```

--------------------------------

### Search Event - vue-select

Source: https://github.com/sagalbot/vue-select/blob/master/docs/api/events.md

Emitted whenever the search string in the input field changes. It provides the current search string and a function to toggle the loading state, useful for AJAX operations. See the AJAX Guide for a complete example.

```js
/**
 * @param {String} searchString - the search string
 * @param {Function} toggleLoading - function to toggle loading state, accepts true or false boolean
 */
this.$emit('search', this.search, this.toggleLoading);
```

```vue
<v-select
    @search="(search, loading) => {
      loading(true)
      fetchOptions(search).then(() => loading(false))
    }"
/>
```

--------------------------------

### Register vue-select Component in Vue 3

Source: https://github.com/sagalbot/vue-select/blob/master/README.md

Demonstrates how to import and globally register the VueSelect component in a Vue 3 application's main entry file (e.g., main.ts or main.js).

```javascript
# main.ts or main.js

import { createApp } from "vue";
import App from "./App.vue";

import { VueSelect } from "vue-select";

createApp(App)
    .component("v-select", VueSelect)
    .mount("#app");

```

--------------------------------

### Vue-Select: Options as Strings

Source: https://github.com/sagalbot/vue-select/blob/master/docs/guide/options.md

Demonstrates using the 'options' prop with an array of primitive values (strings or numbers). These values are directly used as the display label for each option in the select component.

```html
<v-select :options="['Canada', 'United States']"></v-select>
```

--------------------------------

### Vue-Select: Handling Null/Empty Options

Source: https://github.com/sagalbot/vue-select/blob/master/docs/guide/options.md

Explains that the 'options' prop must be an array. To represent a null or empty state, an empty array `[]` should be passed to the 'options' prop.

```html
<v-select :options="[]"></v-select>
```

--------------------------------

### Vue Select Keydown Customization

Source: https://github.com/sagalbot/vue-select/blob/master/docs/guide/keydown.md

Documentation for customizing keydown behavior in Vue Select, covering the selectOnKeyCodes and mapKeyDown props.

```APIDOC
selectOnKeyCodes {Array}
  - Description: An array of keyCodes that will trigger a typeAheadSelect. Any keyCodes in this array will prevent the default event action and trigger a typeahead select.
  - Default: [13] (for return key)
  - Example Use: Tagging on a comma keystroke.

mapKeyDown {Function}
  - Description: Allows for customizing the component's response to keydown events while the search input has focus. It receives a map of keyCodes to handlers and the VueSelect instance.
  - Signature: (map, vm) => map
  - Parameters:
    - map {Object}: Mapped keyCode to handlers { <keyCode>:<callback> }
    - vm {VueSelect}: The VueSelect component instance.
  - Returns: {Object}: The modified map of keyCodes to handlers.
  - Default Behavior: The prop is a no-op, returning the same map object it receives. This object maps keyCodes to handlers.
  - Precedence: KeyCodes added to `selectOnKeyCodes` are also passed to `map-keydown`, ensuring `map-keydown` takes precedence.
  - Default Handlers:
    - 8 (delete): e => this.maybeDeleteValue()
    - 9 (tab): e => this.onTab()
    - 13 (enter): e => {
        e.preventDefault();
        return this.typeAheadSelect();
      }
    - 27 (esc): e => this.onEscape()
    - 38 (up): e => {
        e.preventDefault();
        return this.typeAheadUp();
      }
    - 40 (down): e => {
        e.preventDefault();
        return this.typeAheadDown();
      }
  - Example: Autocomplete Email Addresses by listening for the '@' key.
```

--------------------------------

### Vue-Select: Options as Objects (Custom Label)

Source: https://github.com/sagalbot/vue-select/blob/master/docs/guide/options.md

Illustrates how to specify a custom property from option objects to be used as the label when the default 'label' property is not available or named differently. This is achieved using the 'label' prop.

```html
<v-select label="countryName" :options="countries"></v-select>
```

--------------------------------

### Handle vue-select Input Event with Vuex

Source: https://github.com/sagalbot/vue-select/blob/master/docs/guide/vuex.md

This snippet demonstrates how to bind the `input` event of `vue-select` to a Vuex action or mutation. It shows how to dispatch a Vuex action (`myAction`) when the selected value changes, using the `v-model` equivalent pattern for state management.

```html
<v-select 
    @input="myAction" 
    :options="$store.state.options"
    :value="$store.state.selected"
  ></v-select>
```

--------------------------------

### Import vue-select CSS for Vue 2

Source: https://github.com/sagalbot/vue-select/blob/master/README.md

Imports the required CSS file for the vue-select component in a Vue 2 project. This is necessary for the component's default styling.

```javascript
import "vue-select/dist/vue-select.css";

```

--------------------------------

### Vue-Select: Options as Objects (Default Label)

Source: https://github.com/sagalbot/vue-select/blob/master/docs/guide/options.md

Shows how to provide an array of objects to the 'options' prop. By default, vue-select will attempt to use the 'label' property from each object as the option's display text.

```html
<v-select :options="[{label: 'Canada', code: 'ca'}]"></v-select>
```

--------------------------------

### Import vue-select CSS for Vue 3

Source: https://github.com/sagalbot/vue-select/blob/master/README.md

Includes the necessary CSS for the vue-select component in a Vue 3 single-file component. This ensures the component is styled correctly.

```css
<style>
@import "vue-select/dist/vue-select.css";
</style>
```

--------------------------------

### onTab Prop for vue-select

Source: https://github.com/sagalbot/vue-select/blob/master/docs/api/props.md

Callback executed when the 'tab' key is pressed. If `selectOnTab` is enabled, it selects the current value.

```javascript
onTab: {
	type: Function,
	default: function() {
		if (this.selectOnTab) {
			this.typeAheadSelect();
		}
	}
}
```

--------------------------------

### Vue Select Contributors Component Usage

Source: https://github.com/sagalbot/vue-select/blob/master/docs/contributors.md

This snippet demonstrates the usage of the Contributors component within the Vue Select project. It is typically used to render a list or display of the project's community contributors.

```Vue
<Contributors />
```

--------------------------------

### loading Prop for vue-select

Source: https://github.com/sagalbot/vue-select/blob/master/docs/api/props.md

Show spinner if the component is in a loading state.

```javascript
loading: {
	type: Boolean,
	default: false
}
```

--------------------------------

### Vue Select header slot

Source: https://github.com/sagalbot/vue-select/blob/master/docs/api/slots.md

Displayed at the top of the component, above `.vs__dropdown-toggle`. Exposes `search`, `loading`, `searching`, `filteredOptions`, and `deselect`.

--------------------------------

### placeholder Prop for vue-select

Source: https://github.com/sagalbot/vue-select/blob/master/docs/api/props.md

Equivalent to the `placeholder` attribute on an `<input>`, displayed when no option is selected.

```javascript
placeholder: {
	type: String,
	default: ""
}
```

--------------------------------

### Globally Register Custom Components (Vue 2 JS)

Source: https://github.com/sagalbot/vue-select/blob/master/docs/guide/components.md

Demonstrates how to set custom components globally for all vue-select instances when registering the component in a Vue 2 application. This involves overriding the default value of the `components` prop.

```js
import Vue from 'vue';
import vSelect from 'vue-select';

// Set the components prop default to return our fresh components 
vSelect.props.components.default = () => ({
  Deselect: {
    render: createElement => createElement('span', '❌'),
  },
  OpenIndicator: {
    render: createElement => createElement('span', '🔽'),
  },
});

// Register the component
Vue.component(vSelect)
```

--------------------------------

### pushTags Prop for vue-select

Source: https://github.com/sagalbot/vue-select/blob/master/docs/api/props.md

When true, newly created tags will be added to the options list.

```javascript
pushTags: {
	type: Boolean,
	default: false
}
```

--------------------------------

### selectOnTab Prop for vue-select

Source: https://github.com/sagalbot/vue-select/blob/master/docs/api/props.md

When true, hitting the 'tab' key will select the currently highlighted option in the dropdown.

```javascript
selectOnTab: {
	type: Boolean,
	default: false
}
```

--------------------------------

### transition Configuration for vue-select

Source: https://github.com/sagalbot/vue-select/blob/master/docs/api/props.md

Specifies a Vue transition property to be applied to the dropdown menu element. Note that vue-select does not provide default CSS for transitions; users must implement their own. Defaults to 'fade'.

```javascript
transition: {
	type: String,
	default: "fade"
}
```

--------------------------------

### label Prop for vue-select

Source: https://github.com/sagalbot/vue-select/blob/master/docs/api/props.md

Tells vue-select what key to use when generating option labels when each `option` is an object. Defaults to 'label'.

```javascript
label: {
	type: String,
	default: "label"
}
```

--------------------------------

### Globally Register Custom Components (Vue 3 JS)

Source: https://github.com/sagalbot/vue-select/blob/master/docs/guide/components.md

Illustrates how to globally configure custom components for vue-select in a Vue 3 application. This method overrides the `components` prop's default to apply custom Deselect and OpenIndicator components across the app.

```js
import {createApp, h} from 'vue';
import vSelect from 'vue-select';

// Set the components prop default to return our fresh components 
vSelect.props.components.default = () => ({
  Deselect: {
    render: () => h('span', '❌'),
  },
  OpenIndicator: {
    render: () => h('span', '🔽'),
  },
});

// Register the component
const app = createApp(App);
app.component('vSelect', vSelect);
```

--------------------------------

### dir Option for Vue Select

Source: https://github.com/sagalbot/vue-select/blob/master/docs/api/props.md

Sets the Right-to-Left (RTL) support for the component. Accepts 'ltr', 'rtl', or 'auto'.

```js
dir: {
	type: String,
	default: "auto"
}
```

--------------------------------

### Handle AJAX Option Loading with @search Event

Source: https://github.com/sagalbot/vue-select/blob/master/docs/guide/ajax.md

Demonstrates how to use the @search event in vue-select to trigger asynchronous loading of options. The event provides the current search string and a function to manage the loading state, allowing for server-side data fetching and UI feedback.

```html
<v-select @search="fetchOptions" />
```

```javascript
/**
 * Triggered when the search text changes.
 *
 * @param search  {String}    Current search text
 * @param loading {Function}	Toggle loading class
 */
fetchOptions (search, loading) {
  //  ... do some asynchronous stuff!  
}
```

--------------------------------

### Custom Loading Spinner Slot

Source: https://github.com/sagalbot/vue-select/blob/master/docs/guide/ajax.md

Shows how to implement a custom loading spinner for vue-select using the 'spinner' slot. This allows developers to replace the default spinner with their own UI elements, controlled by the component's internal loading state.

```html
<div class="spinner" v-show="spinner">Loading...</div>
```

--------------------------------

### options Prop for vue-select

Source: https://github.com/sagalbot/vue-select/blob/master/docs/api/props.md

An array of strings or objects to be used as dropdown choices. For objects, it looks for a `label` key by default, which can be customized via the `label` prop.

```javascript
options: {
	type: Array,
	default() {
		return [];
	}
}
```

--------------------------------

### Vue Select list-header slot

Source: https://github.com/sagalbot/vue-select/blob/master/docs/api/slots.md

Displayed as the first item in the dropdown. No content by default. Parent element is the `<ul>`, so this slot should contain a root `<li>`. Exposes `search`, `loading`, `searching`, and `filteredOptions`.

--------------------------------

### Vue Select search slot

Source: https://github.com/sagalbot/vue-select/blob/master/docs/api/slots.md

The search input element. Provides attributes and events for binding, allowing full control over the input's behavior and appearance. Includes bindings for disabled state, placeholder, focus, input events, and more.

```javascript
attributes: {
  'disabled': this.disabled,
  'placeholder': this.searchPlaceholder,
  'tabindex': this.tabindex,
  'readonly': !this.searchable,
  'id': this.inputId,
  'aria-autocomplete': 'list',
  'aria-labelledby': `vs${this.uid}__combobox`,
  'aria-controls': `vs${this.uid}__listbox`,
  'aria-activedescendant': this.typeAheadPointer > -1
    ? `vs${this.uid}__option-${this.typeAheadPointer}`
    : '',
  'ref': 'search',
  'type': 'search',
  'autocomplete': this.autocomplete,
  'value': this.search,
}
```

```javascript
events: {
  'compositionstart': () => this.isComposing = true,
  'compositionend': () => this.isComposing = false,
  'keydown': this.onSearchKeyDown,
  'blur': this.onSearchBlur,
  'focus': this.onSearchFocus,
  'input': (e) => this.search = e.target.value,
}
```

--------------------------------

### value Configuration for vue-select

Source: https://github.com/sagalbot/vue-select/blob/master/docs/api/props.md

Represents the currently selected value within the component, similar to a standard HTML input's value attribute. Changes to this property can be tracked using the 'input' event. The default value is null.

```javascript
value: {
	default: null
}
```

--------------------------------

### dropdownShouldOpen Option for Vue Select

Source: https://github.com/sagalbot/vue-select/blob/master/docs/api/props.md

A function to override the default logic for determining if the dropdown should open. Receives the vue-select instance as an argument.

```js
dropdownShouldOpen: {
    type: Function,
    default({noDrop, open, mutableLoading}) {
      return noDrop ? false : open && !mutableLoading;
    }
}
```

--------------------------------

### Enable Vue Select for List Autocomplete (Automatic Selection)

Source: https://github.com/sagalbot/vue-select/blob/master/docs/guide/accessibility.md

Configures Vue Select for list autocomplete where user input filters options, and the first suggestion is automatically highlighted. This highlighted suggestion becomes the value on blur unless changed by the user.

```html
<v-select :options="['No Autocomplete', 'List Autocomplete']" />
```

--------------------------------

### Vue Select appendToBody and calculatePosition Props

Source: https://github.com/sagalbot/vue-select/blob/master/docs/guide/positioning.md

Explains the `appendToBody` prop for rendering the dropdown outside the component's DOM and the `calculatePosition` prop for custom JavaScript-based positioning logic. This is useful for avoiding z-index issues or controlling placement in modals.

```APIDOC
VueSelectProps:
  appendToBody: boolean
    Description: When true, the dropdown menu will be appended to the document body. This allows for more flexible positioning and can help resolve z-index conflicts.
    Default: false

  calculatePosition: Function
    Description: A function that receives the dropdown element and its positioning context, and is responsible for setting the absolute positioning (top, left) of the dropdown. This prop is used when `appendToBody` is true.
    Signature: (dropdown: HTMLElement, context: object) => void
    Example:
      // Example using Popper.js (conceptual)
      calculatePosition: (dropdown, context) => {
        // Use Popper.js API to calculate and apply styles to 'dropdown'
        // based on 'context' (e.g., reference element, viewport)
        // Example: popperInstance.update();
      }
    Dependencies: Popper.js (recommended for advanced positioning)
```

--------------------------------

### multiple Prop for vue-select

Source: https://github.com/sagalbot/vue-select/blob/master/docs/api/props.md

Equivalent to the `multiple` attribute on a `<select>` input, allowing multiple options to be selected.

```javascript
multiple: {
	type: Boolean,
	default: false
}
```

--------------------------------

### Vue Select selected-option slot

Source: https://github.com/sagalbot/vue-select/blob/master/docs/api/slots.md

The text displayed within `selected-option-container`. This slot does not exist if `selected-option-container` is implemented. Exposes the selected `option` object.

--------------------------------

### Vue Select no-options slot

Source: https://github.com/sagalbot/vue-select/blob/master/docs/api/slots.md

Displayed above `list-footer` in the dropdown when `filteredOptions.length === 0`. Exposes `search`, `loading`, and `searching`.

--------------------------------

### taggable Configuration for vue-select

Source: https://github.com/sagalbot/vue-select/blob/master/docs/api/props.md

Enables or disables the ability to create new options from the user's search input. When true, users can add custom options that are not present in the initial list. Defaults to false.

```javascript
taggable: {
	type: Boolean,
	default: false
}
```

--------------------------------

### createOption Option for Vue Select

Source: https://github.com/sagalbot/vue-select/blob/master/docs/api/props.md

A user-defined function for creating new options. It receives the new option value and can format it, potentially emitting an 'option:created' event.

```js
createOption: {
  type: Function,
  default(newOption) {
    if (typeof this.optionList[0] === 'object') {
      newOption = {[this.label]: newOption}
    }

    this.$emit('option:created', newOption)
    return newOption
  }
}
```

--------------------------------

### Vue Select `spinner` Slot

Source: https://github.com/sagalbot/vue-select/blob/master/docs/api/slots.md

A slot component used to display a loading indicator. It receives a `loading` prop to control its visibility based on the component's loading state.

```APIDOC
spinner:
  Description: Component displayed when the select is in a loading state.
  Props:
    - loading {Boolean}: If true, the component is in a loading state and the spinner should be visible.
```

--------------------------------

### getOptionLabel Prop for vue-select

Source: https://github.com/sagalbot/vue-select/blob/master/docs/api/props.md

Callback to generate the label text. If `{option}` is an object, returns `option[this.label]` by default. Label text is used for filtering comparison and displaying.

```javascript
getOptionLabel: {
  type: Function,
  default(option) {
    if (typeof option === 'object') {
      if (!option.hasOwnProperty(this.label)) {
        return console.warn(
          `[vue-select warn]: Label key "option.${this.label}" does not` +
          ` exist in options object ${JSON.stringify(option)}.\n` +
          'https://vue-select.org/api/props.html#getoptionlabel'
        )
      }
      return option[this.label]
    }
    return option;
  }
}
```

--------------------------------

### uid Configuration for vue-select

Source: https://github.com/sagalbot/vue-select/blob/master/docs/api/props.md

Generates a unique identifier used for creating DOM attributes and IDs for the component instance. It is crucial that this value is unique for every instance of the component to prevent conflicts. Defaults to a generated unique ID.

```javascript
uid: {
  type: [String, Number],
  default: () => uniqueId()
}
```

--------------------------------

### Enable Vue Select for List Autocomplete (Manual Selection)

Source: https://github.com/sagalbot/vue-select/blob/master/docs/guide/accessibility.md

Shows how to configure Vue Select for list autocomplete where user input filters the options, and the user manually selects from the presented list. The typed string becomes the value unless an option is chosen.

```html
<v-select taggable :options="['No Autocomplete', 'List Autocomplete']" />
```

--------------------------------

### Override Deselect Component (HTML Usage)

Source: https://github.com/sagalbot/vue-select/blob/master/docs/guide/components.md

Demonstrates how to use the `components` prop to override the default Deselect component in vue-select. This allows for custom rendering of the clear button, especially in multiple select tags.

```html
<v-select :components="{Deselect}" />
```

--------------------------------

### Configure Vue Select for No Autocomplete

Source: https://github.com/sagalbot/vue-select/blob/master/docs/guide/accessibility.md

Demonstrates how to disable filtering in Vue Select to provide a static list of options, regardless of user input. This is useful when the selection list should not change based on typing.

```html
<v-select :filterable="false" :options="['No Autocomplete', 'List Autocomplete']" />
```

--------------------------------

### Vue Select footer slot

Source: https://github.com/sagalbot/vue-select/blob/master/docs/api/slots.md

Displayed at the bottom of the component, below `.vs__dropdown-toggle`. When implementing this slot, you'll likely need to use `appendToBody` to position the dropdown. Otherwise content in this slot will affect its positioning. Exposes `search`, `loading`, `searching`, `filteredOptions`, and `deselect`.

--------------------------------

### Vue Select SCSS Variables (Deprecated)

Source: https://github.com/sagalbot/vue-select/blob/master/docs/guide/css.md

Vue Select previously leveraged SCSS variables for styling. While the SCSS build is deprecated from v3.18 and will be removed in v4.0.0, the files are still available in the v3 codebase. The recommended approach is to use CSS variables instead.

```scss
/* Example SCSS variable definition (location: src/scss/global/_variables.scss) */
$vs-primary-color: #333 !default;
$vs-text-color: #eee !default;

/* These variables are implemented with !default to facilitate overriding. */
/* The SCSS build is deprecated; use CSS variables for customization. */
```

--------------------------------

### Vue Select open-indicator slot

Source: https://github.com/sagalbot/vue-select/blob/master/docs/api/slots.md

The open indicator is the caret icon on the component used to indicate dropdown status. Provides attributes for binding.

```javascript
attributes: {
  'ref': 'openIndicator',
  'role': 'presentation',
  'class': 'vs__open-indicator',
}
```