@nuykon/vue3-treeselect

vue3-treeselect

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 @zanmato/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 "@zanmato/vue3-treeselect";
// import the styles
import "@zanmato/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

1. Fork & clone the repo
2. Install dependencies
3. Check out a new branch
4. pnpm run docs & hack
5. Make sure the examples in the docs are working
6. Push your changes & file a pull request

Credits

This project 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.