vue-multiselect

A Vue multiselect component. See demo here and source here.

Install

npm i @arxzur/vue-multiselect

Basic usage

Import component styles

// main.ts
import { createApp } from "vue";
import App from "./App.vue";
import "@arxzur/vue-multiselect/dist/index.css";

createApp(App).mount("#app");

Import Vue component

// App.vue
<script setup lang="ts">
import { VueMultiselect } from "@arxzur/vue-multiselect"

function printOptions(n: string[]) {
  console.log(n)
}
</script>

<template>
    <VueMultiselect :options="['one', 'two', 'three']" :selected="[]" @update="printOptions" />
</template>

Available props

Chose from following props

const props = withDefaults(defineProps<{
  options: any[]            // Dropdown menu options
  selected: any[]           // Pre-selected options
  placeholder?: string      // Placeholder text in search field
  isFlexible?: boolean      // Flexible width toggle
}>(), {
  placeholder: "Search or add a tag",
  isFlexible: false
})

Events emitted

@update will emit an array of currently selected options whenever an option is selected or removed.

Contribute

For contact, bug reports see repo here.

Compile and Hot-Reload for Development

npm run dev

Build in library mode

npm run build:lib

Run Unit Tests with Vitest

npm run test:run

Licence

This component is open-sourced software licensed under the MIT license.