Update readme (#830)

* bump readme * bump * bump * wip * wip * wip * wip * wip * wip * wip
2026-06-07 07:12:23 +03:00 · 2019-04-14 10:08:55 -07:00
parent b127675cb9
commit 19a865667c
2 changed files with 20 additions and 79 deletions
@@ -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 `<select>` element could do, wrapped up into a zero dependency, highly extensible Vue component. 
+> **Everything you wish the HTML `<select>` 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
-<v-select v-model="selected" :options="['foo','bar']"></v-select>
+<v-select v-model="selected" :options="['Vue.js','React']"></v-select>
 ```

-#### CDN
-
-Just include `vue` & `vue-select.js` - I recommend using [unpkg](https://unpkg.com/#/).
-
-```html
-<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:
-
-```js
-Vue.component('v-select', VueSelect.VueSelect);
-```
-
-You may now use the component in your markup
-
-```html
-<v-select v-model="selected" :options="['foo','bar']"></v-select>
-```
-
-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
-<v-select v-model="selected"></v-select>
-```
-```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
-<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.
-
-```html
-<v-select :options="[{label: 'foo', value: 'Foo'}]"></v-select>
-```
-
-### 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

@@ -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)**