Gathering detailed insights and metrics for @riophae/vue-treeselect
Gathering detailed insights and metrics for @riophae/vue-treeselect
A multi-select component with nested options support for Vue.js
Installations
npm install @riophae/vue-treeselectDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
12.10.0
NPM Version
6.11.3
Score
85.2
Supply Chain
97.5
Quality
74.9
Maintenance
50
Vulnerability
99.3
License
Releases
36
Languages
3
JavaScript
Vue
CSS
JavaScript (82.97%)
Vue (10.35%)
CSS (6.67%)
Developer
Download Statistics
Total Downloads
13,305,322
Last Day
1,137
Last Week
31,864
Last Month
139,666
Last Year
1,904,836
GitHub Statistics
MIT License
2,949 Stars
599 Commits
520 Forks
46 Watchers
2 Branches
19 Contributors
Updated on Jul 04, 2025
Bundle Size
62.95 kB
Minified
16.82 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
0.4.0
Package Id
@riophae/vue-treeselect@0.4.0
Size
291.54 kB
NPM Version
6.11.3
Node Version
12.10.0
Published on
Oct 10, 2019
Total Downloads
Cumulative downloads
Total Downloads
13,305,322
Last Day
-26.8%
1,137
Compared to previous day
Last Week
-7.7%
31,864
Compared to previous week
Last Month
2.5%
139,666
Compared to previous month
Last Year
-16.4%
1,904,836
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
8
Peer Dependencies
1
Dev Dependencies
80
@babel/core@babel/plugin-syntax-jsx@babel/plugin-transform-runtime@babel/preset-env@size-limit/preset-big-lib@vue/test-utilsautoprefixerbabel-eslintbabel-loaderbabel-plugin-istanbulbabel-plugin-transform-vue-jsxcache-loaderchalkcodecovconnect-history-api-fallbackcopy-webpack-plugincss-loaderentitieseslinteslint-config-riophaeeslint-friendly-formattereslint-import-resolver-webpackeslint-loadereslint-plugin-importeslint-plugin-reacteslint-plugin-unicorneslint-plugin-vueeventsource-polyfillexpressfriendly-errors-webpack-plugingh-pageshtml-webpack-pluginjasmine-corejstransformer-markdown-itkarmakarma-chrome-launcherkarma-coveragekarma-jasminekarma-jasmine-matcherskarma-sourcemap-loaderkarma-spec-reporterkarma-webpacklessless-loadermini-css-extract-pluginopenoptimize-css-assets-webpack-pluginorapostcss-loaderpre-commitpugpug-loaderpuppeteerraw-loaderregenerator-runtimerimrafrun-seriesscript-loadershallow-equalshelljsstring.prototype.repeatstrip-indentstylelintstylelint-config-xo-spaceterser-webpack-pluginurl-loadervodalvuevue-loadervue-style-loadervue-template-compilervuexwebpackwebpack-bundle-analyzerwebpack-cdn-pluginwebpack-dev-middlewarewebpack-hot-middlewarewebpack-mergewebpack-node-externalsyaku
vue-treeselect
A multi-select component with nested options support for Vue.js
Features
- Single & multiple select with nested options support
- Fuzzy matching
- Async searching
- Delayed loading (load data of deep level options only when needed)
- Keyboard support (navigate using Arrow Up & Arrow Down keys, select option using Enter key, etc.)
- Rich options & highly customizable
- Supports a wide range of browsers (see below)
- RTL support
Requires Vue 2.2+
Getting Started
It's recommended to install vue-treeselect via npm, and build your app using a bundler like webpack.
1npm install --save @riophae/vue-treeselect
This example shows how to integrate vue-treeselect with your Vue SFCs.
1<!-- Vue SFC --> 2<template> 3 <div id="app"> 4 <treeselect v-model="value" :multiple="true" :options="options" /> 5 </div> 6</template> 7 8<script> 9 // import the component 10 import Treeselect from '@riophae/vue-treeselect' 11 // import the styles 12 import '@riophae/vue-treeselect/dist/vue-treeselect.css' 13 14 export default { 15 // register the component 16 components: { Treeselect }, 17 data() { 18 return { 19 // define the default value 20 value: null, 21 // define options 22 options: [ { 23 id: 'a', 24 label: 'a', 25 children: [ { 26 id: 'aa', 27 label: 'aa', 28 }, { 29 id: 'ab', 30 label: 'ab', 31 } ], 32 }, { 33 id: 'b', 34 label: 'b', 35 }, { 36 id: 'c', 37 label: 'c', 38 } ], 39 } 40 }, 41 } 42</script>
If you just don't want to use webpack or any other bundlers, you can simply include the standalone UMD build in your page. In this way, make sure Vue as a dependency is included before vue-treeselect.
1<html> 2 <head> 3 <!-- include Vue 2.x --> 4 <script src="https://cdn.jsdelivr.net/npm/vue@^2"></script> 5 <!-- include vue-treeselect & its styles. you can change the version tag to better suit your needs. --> 6 <script src="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.umd.min.js"></script> 7 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.min.css"> 8 </head> 9 <body> 10 <div id="app"> 11 <treeselect v-model="value" :multiple="true" :options="options" /> 12 </div> 13 </body> 14 <script> 15 // register the component 16 Vue.component('treeselect', VueTreeselect.Treeselect) 17 18 new Vue({ 19 el: '#app', 20 data: { 21 // define the default value 22 value: null, 23 // define options 24 options: [ { 25 id: 'a', 26 label: 'a', 27 children: [ { 28 id: 'aa', 29 label: 'aa', 30 }, { 31 id: 'ab', 32 label: 'ab', 33 } ], 34 }, { 35 id: 'b', 36 label: 'b', 37 }, { 38 id: 'c', 39 label: 'c', 40 } ], 41 }, 42 }) 43 </script> 44</html>
Documentation & Live Demo
Note: please use a desktop browser since the website hasn't been optimized for mobile devices.
Browser Compatibility
- Chrome
- Edge
- Firefox
- IE ≥ 9
- Safari
It should function well on IE9, but the style can be slightly broken due to the lack of support of some relatively new CSS features, such as transition and animation. Nevertheless it should look 90% same as on modern browsers.
Bugs
You can use this pen to reproduce bugs and then open an issue.
Contributing
- Fork & clone the repo
- Install dependencies by
yarnornpm install - Check out a new branch
npm run dev& hack- Make sure
npm testpasses - Push your changes & file a pull request
Credits
This project is inspired by vue-multiselect, react-select and Ant Design. Special thanks go to their respective authors!
Some icons used in this project:
- "link" icon made by Smashicons is licensed under CC 3.0 BY
- "spinner" icon from SpinKit is licensed under the MIT License
- "caret" icon made by Dave Gandy is licensed under CC 3.0 BY
- "delete" icon made by Freepik is licensed under CC 3.0 BY
- "checkmark symbol" & "minus symbol" icons made by Catalin Fertu are licensed under CC 3.0 BY
License
Copyright (c) 2017-present Riophae Lee.
Released under the MIT License.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
0 existing vulnerabilities detected
Reason
Found 1/30 approved changesets -- score normalized to 0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 1 are checked with a SAST tool
Score
3.5
/10
Last Scanned on 2025-06-23
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More