diff --git a/README.md b/README.md index 5074c93..620d10c 100644 --- a/README.md +++ b/README.md @@ -1,35 +1,31 @@ -# vue-select [![Build Status](https://travis-ci.org/sagalbot/vue-select.svg?branch=master)](https://travis-ci.org/sagalbot/vue-select) [![Coverage Status](https://coveralls.io/repos/github/sagalbot/vue-select/badge.svg)](https://coveralls.io/github/sagalbot/vue-select) ![MIT License](https://img.shields.io/github/license/sagalbot/vue-select.svg?style=flat-square) ![Current Release](https://img.shields.io/github/release/sagalbot/vue-select.svg?style=flat-square) +# vue-select ![Current Release](https://img.shields.io/github/release/sagalbot/vue-select.svg?style=flat-square) ![Bundle Size](https://img.shields.io/bundlephobia/min/vue-select.svg?style=flat-square) ![Monthly Downloads](https://img.shields.io/npm/dm/vue-select.svg?style=flat-square) ![Code Coverage](https://img.shields.io/coveralls/github/sagalbot/vue-select.svg?style=flat-square) ![Maintainability Score](https://img.shields.io/codeclimate/maintainability/sagalbot/vue-select.svg?style=flat-square) ![MIT License](https://img.shields.io/github/license/sagalbot/vue-select.svg?style=flat-square) -> Everything you wish the native `` element could do, wrapped up into a lightweight, zero +dependency, extensible Vue component.** -Want to help out as a primary contributor? [Get in touch](https://github.com/sagalbot/vue-select/issues/581)! - -#### Features -- AJAX Support - Tagging -- List Filtering/Searching -- Supports Vuex +- Filtering / Searching +- Vuex Support +- AJAX Support +- SSR Support +- ~20kb Total / ~5kb CSS / ~15kb JS - Select Single/Multiple Options +- Customizable with slots and SCSS variables - Tested with Bootstrap 3/4, Bulma, Foundation - +95% Test Coverage -- ~33kb minified with CSS - Zero dependencies ## Documentation -- **[Demo & Docs](http://sagalbot.github.io/vue-select/)** -- **[Example on JSBin](http://jsbin.com/saxaru/8/edit?html,js,output)** + +Complete documentation and examples available at https://vue-select.org. + +- **[API Documentation](https://vue-select.org)** +- **[Sandbox Demo](https://vue-select.org/sandbox.html)** - **[CodePen Template](http://codepen.io/sagalbot/pen/NpwrQO)** -- **[Trello Roadmap](https://trello.com/b/vWvITNzS/vue-select)** +- **[GitHub Projects](https://github.com/sagalbot/vue-select/projects)** ## 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`._ - ```bash $ npm install vue-select ``` @@ -39,73 +35,18 @@ Register the component ```js import Vue from 'vue' import vSelect from 'vue-select' + Vue.component('v-select', vSelect) ``` You may now use the component in your markup ```html - + ``` -#### CDN - -Just include `vue` & `vue-select.js` - I recommend using [unpkg](https://unpkg.com/#/). - -```html - - - - - -``` - -Then register the component in your javascript: - -```js -Vue.component('v-select', VueSelect.VueSelect); -``` - -You may now use the component in your markup - -```html - -``` - -Here's an [example on JSBin](http://jsbin.com/saxaru/5/edit?html,js,output). - -## 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. - -```html - -``` -```js -new Vue({ - data: { - selected: null - } -}) -``` - -#### Setting Options - -`vue-select` accepts arrays of strings and objects to use as options through the `options` prop. - -```html - -``` - -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. - -```html - -``` - -### For more information, please visit the [vue-select documentation.](https://sagalbot.github.io/vue-select) +You can also include vue-select directly in the browser. Check out the +[documentation for loading from CDN.](https://vue-select.org/guide/install.html#in-the-browser). ## License diff --git a/docs/README.md b/docs/README.md index dcebc84..082452f 100644 --- a/docs/README.md +++ b/docs/README.md @@ -34,5 +34,5 @@ If you want to get a quick sense of what vue-select can do, check out #### Resources - **[CodePen Template](http://codepen.io/sagalbot/pen/NpwrQO)** -- **[Trello Roadmap](https://trello.com/b/vWvITNzS/vue-select)** - **[GitHub](https://github.com/sagalbot/vue-select)** +- **[Projects](https://github.com/sagalbot/vue-select/projects)**