vue-select
Version:
A native Vue.js component that provides similar functionality to Select2 without the overhead of jQuery.
122 lines (106 loc) • 5.16 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue Select | VueJS Select2 Component</title>
<link href="//fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Roboto Mono" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=Dosis:300&text=Vue Select" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/octicons/4.4.0/font/octicons.min.css" rel="stylesheet" type="text/css">
<meta name="title" content="Vue Select | VueJS Select2/Chosen Component">
<meta name="description"
content="A well-tested, native Vue.js component that provides similar functionality to Select2/Chosen without the overhead of jQuery.">
<link rel="icon" href="static/vue-logo.png" type="image/png">
<meta property="og:image" content="static/vue-logo.png">
<meta property="twitter:image" content="static/vue-logo.png">
<meta name="description"
content="A native Vue.js component that provides similar functionality to Select2/Chosen without the overhead of jQuery.">
<meta property="og:description"
content="A native Vue.js component that provides similar functionality to Select2/Chosen without the overhead of jQuery.">
<meta property="twitter:description"
content="A native Vue.js component that provides similar functionality to Select2/Chosen without the overhead of jQuery.">
<meta property="twitter:title" content="Vue Select | VueJS Select2/Chosen Component">
<meta property="og:title" content="Vue Select | VueJS Select2/Chosen Component">
<meta property="og:site_name" content="Vue Select | VueJS Select2/Chosen Component">
<meta property="og:url" content="http://sagalbot.github.io/vue-select/">
</head>
<body>
<div id="app">
<h1>Vue Select</h1>
<p class="accolades lead">
<a href="https://github.com/sagalbot/vue-select">
<img src="https://img.shields.io/github/stars/sagalbot/vue-select.svg?label=Stars&style=flat-square"
alt="GitHub Stars">
</a>
<a href="https://www.npmjs.com/package/vue-select">
<img src="https://img.shields.io/npm/dm/vue-select.svg?style=flat-square" alt="Downloads per Month">
</a>
<a href="https://codeclimate.com/github/sagalbot/vue-select/maintainability">
<img src="https://img.shields.io/codeclimate/maintainability/sagalbot/vue-select.svg?style=flat-square"
alt="Maintainability"/>
</a>
<a href="https://gemnasium.com/github.com/sagalbot/vue-select">
<img src="https://img.shields.io/gemnasium/sagalbot/vue-select.svg?style=flat-square"
alt="No Dependencies"/>
</a>
<img src="https://img.shields.io/github/license/sagalbot/vue-select.svg?style=flat-square" alt="MIT License">
<img src="https://img.shields.io/github/release/sagalbot/vue-select.svg?style=flat-square"
alt="Current Release">
</p>
<p class="lead">
A Vue.js select component that provides similar functionality
to Select2/Chosen without the overhead of jQuery.
</p>
<v-select id="v-select" :options="options" @input="redirect" label="title">
<template slot="option" slot-scope="option">
<span class="octicon" :class="option.icon"></span>
{{ option.title }}
</template>
</v-select>
<section class="content">
<div class="feature-list">
<ul class="list-vue">
<li>Supports Vuex</li>
<li>Tagging Support</li>
<li>Custom Templating</li>
<li>Zero JS/CSS dependencies</li>
<li>Custom Filtering Algorithms</li>
</ul>
<ul class="list-vue">
<li>+95% Test Coverage</li>
<li>Select Single/Multiple</li>
<li>Typeahead Suggestions</li>
<li>Supports RTL & Translations</li>
<li>Plays nice with CSS Frameworks</li>
</ul>
</div>
<p>
And so much more! Get started with: <br>
<code>yarn add vue-select</code>
</p>
<div class="cta">
<a class="btn btn-primary btn-outline btn-lg" href="https://github.com/sagalbot/vue-select">
<span class="octicon octicon-mark-github"></span> View on GitHub
</a>
<a class="btn btn-primary btn-outline btn-lg" href="docs/">
<span class="octicon octicon-book"></span> Read the Docs
</a>
</div>
</section>
</div>
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-12818324-8', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>