Package Exports

@inkomomutane/vue3-treeselect
@inkomomutane/vue3-treeselect/dist/vue3-treeselect.cjs.min.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@inkomomutane/vue3-treeselect) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue3-treeselect

License

A multi-select component with nested options support for Vue 3.

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

Changes from the original vue-treeselect

Async searching combined with delayed loading

Requires Vue 3.0+

Getting Started

It's recommended to install vue3-treeselect via npm, and build your app using a bundler like webpack.

npm install --save @inkomomutane/vue3-treeselect

This example shows how to integrate the component with your Vue SFCs.

<!-- Vue SFC -->
<template>
  <div id="app">
    <treeselect v-model="state.value" :multiple="true" :options="options" />
  </div>
</template>

<script setup>
import { reactive } from "vue";

// import the component
import Treeselect from "@inkomomutane/vue3-treeselect";
// import the styles
import "@inkomomutane/vue3-treeselect/dist/vue3-treeselect.min.css";

const options = [
  {
    id: "a",
    label: "a",
    children: [
      {
        id: "aa",
        label: "aa"
      },
      {
        id: "ab",
        label: "ab"
      }
    ]
  },
  {
    id: "b",
    label: "b"
  },
  {
    id: "c",
    label: "c"
  }
];

const state = reactive({
  value: null
});
</script>

Documentation & Live Demo

Visit the website

Note: please use a desktop browser since the website hasn't been optimized for mobile devices.

Browser Compatibility

Chrome
Edge
Firefox
Safari

Bugs

You can open an issue.

Contributing

Fork & clone the repo
Install dependencies by yarn or npm install
Check out a new branch
yarn docs & hack
Make sure the examples in the docs are working
Push your changes & file a pull request

Credits

This project is based on vue3-treeselect by Andreas Johansson which is based on vue3-treeselect by megafetis which was based on vue-treeselect by riophae. 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

Released under the MIT License.