vue-select

Everything you wish the native element could do, wrapped up into a zero dependency, highly extensible Vue component. Features AJAX Support Tagging List Filtering/Searching Supports Vuex Select Single/Multiple Options Tested with Bootstrap 3/4, Bulma, Foundation +95% Test Coverage ~33kb minified with CSS Zero dependencies Documentation Demo & Docs Example on JSBin CodePen Template Trello Roadmap Install Vue Compatibility vue ~2.0 use vue-select ~2.0 vue ~1.0 use vue-select ~1.0 NPM Install the package. You should install vue-select@1.3.3 for use with vue ~1.0. $ npm install vue-select Register the component import Vue from 'vue' import vSelect from 'vue-select' Vue.component('v-select', vSelect) You may now use the component in your markup <v-select v-model="selected" :options="['foo','bar']"></v-select> CDN Just include vue & vue-select.js - I recommend using unpkg. <script src="https://unpkg.com/vue@latest"></script> <!-- use the latest release --> <script src="https://unpkg.com/vue-select@latest"></script> <!-- or point to a specific release --> <script src="https://unpkg.com/vue-select@1.3.3"></script> Then register the component in your javascript: Vue.component('v-select', VueSelect.VueSelect); You may now use the component in your markup <v-select v-model="selected" :options="['foo','bar']"></v-select> Here's an example on JSBin. Basic Usage Syncing a Selected Value The most common use case for vue-select is to have the chosen value synced with a parent component. vue-select takes advantage of the v-model syntax to sync values with a parent. <v-select v-model="selected"></v-select> new Vue({ data: { selected: null } }) Setting Options vue-select accepts arrays of strings and objects to use as options through the options prop. <v-select :options="['foo','bar']"></v-select> When provided an array of objects, vue-select will display a single value of the object. By default, vue-select will look for a key named 'label' on the object to use as display text. <v-select :options="[{label: 'foo', value: 'Foo'}]"></v-select> For more information, please visit the vue-select documentation. License MIT