alopuselect

alopuselect

A native Vue.js select component that provides similar functionality to Select2 without the overhead of jQuery.

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 alopuselect ~2.0
• vue ~1.0 use alopuselect ~1.0

NPM

Install the package. You should install alopuselect@1.3.3 for use with vue ~1.0.

$ npm install alopuselect

Register the component

import Vue from 'vue'
import vSelect from 'alopuselect'
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 & alopuselect.js - I recommend using unpkg.

<script src="https://unpkg.com/vue@latest"></script>
<!-- use the latest release -->
<script src="https://unpkg.com/alopuselect@latest"></script>
<!-- or point to a specific release -->
<script src="https://unpkg.com/alopuselect@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 alopuselect is to have the chosen value synced with a parent component. alopuselect 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

alopuselect 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, alopuselect will display a single value of the object. By default, alopuselect 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 alopuselect documentation.