Registry / ui / vue-treeselectjs

vue-treeselectjs

library0.9.2jsnpmunverified

Vue 3 wrapper around treeselectjs providing a multi-select component with nested options. Version 0.9.2, stable, TypeScript types included. Supports keyboard navigation, screen-sensitive direction, multiple selection, and slots for customization. Key differentiator is its lightweight bundle (4.6 kB JS, 8.5 kB CSS) and full TypeScript support. The component is designed for tree-like data structures (e.g., categories with children) and offers both v-model two-way binding and event-driven usage.

npm install vue-treeselectjs

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-TREESELECTJS

vue-treeselectjs

uijavascriptv0.9.2

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Treeselect

✓ import Treeselect from 'vue-treeselectjs'

✗ const Treeselect = require('vue-treeselectjs')

Default export is a Vue component. Use ES modules for tree-shaking. CommonJS require not recommended as package is ESM-first.

TreeselectValue

✓ import { TreeselectValue } from 'vue-treeselectjs'

✗ import TreeselectValue from 'vue-treeselectjs'

TreeselectValue is a named TypeScript type, not a default export. Always use named import syntax.

DirectionType, IconsType, OptionType

✓ import { DirectionType, IconsType, OptionType } from 'vue-treeselectjs'

✗ import { directionType } from 'vue-treeselectjs'

Type exports are PascalCase. Lowercase or wrong casing will not be resolved.

CSS

✓ import 'vue-treeselectjs/dist/vue-treeselectjs.css'

✗ import 'vue-treeselectjs/dist/index.css'

CSS is a side-effect import; the only valid path is dist/vue-treeselectjs.css.

Demonstrates basic usage with v-model, nested options, and multiple selection in a Vue 3 composition API component with TypeScript.

npm install --save vue-treeselectjs // App.vue <template> <div id="app"> <Treeselect v-model="selectedValues" :options="treeOptions" multiple placeholder="Select items" /> <p>Selected: {{ selectedValues }}</p> </div> </template> <script setup lang="ts"> import { ref } from 'vue' import Treeselect from 'vue-treeselectjs' import 'vue-treeselectjs/dist/vue-treeselectjs.css' const selectedValues = ref<Array<string | number>>([]) const treeOptions = [ { name: 'Category A', value: 'a', children: [ { name: 'Sub A1', value: 'a1' }, { name: 'Sub A2', value: 'a2' } ] }, { name: 'Category B', value: 'b', children: [] } ] </script>

Debug

Known issues

gotchaOptions must have a 'value' property; the property name is not configurable.

fix

Ensure each option object includes a 'value' field (string, number, or boolean). Tree structure uses 'children' array.

affects: >=0.1.0

deprecatedThe '@input' event has been deprecated in favor of '@update:modelValue'.

fix

Use @update:modelValue instead of @input when using non-v-model binding.

affects: >=0.9.0

breakingVersion 0.9.0 changed the default export from a functional component to a class component; breaking change for mixins or custom component wrappers.

fix

Update any code that relies on Treeselect being a functional component (e.g., accessing component internals).

affects: >=0.9.0

gotchaWhen using UMD in browser, the global variable is 'window.VueTreeselect', not 'VueTreeselect'.

fix

Access via window.VueTreeselect in script tags.

affects: >=0.1.0

deprecatedThe 'multiple' prop is deprecated; use 'multiselect' instead.

fix

Replace 'multiple' with 'multiselect' prop.

affects: >=0.9.0

gotchaCSS import must happen after Vue component registration or you may encounter flash of unstyled content.

fix

Import the CSS file in your main entry point or component that uses Treeselect.

affects: >=0.1.0

Errors

Common errors & fixes

Module not found: Can't resolve 'vue-treeselectjs'

Package not installed or incorrect import path.

fix

Run 'npm install --save vue-treeselectjs' and use import 'vue-treeselectjs' (not a subpath).

Property 'modelValue' is not recognized by the Treeselect component.

Using v-model without specifying a value or with unsupported property name.

fix

Ensure you have bound a valid reactive value and used 'v-model="yourVar"'. If customizing, use ':model-value' and '@update:modelValue' explicitly.

Cannot read properties of undefined (reading 'name') — options prop is not an array or missing 'value'.

Options prop is not provided or malformed.

fix

Pass an array of objects with at least 'name' and 'value' properties. Use 'children' array for nested levels.

Export 'default' (imported as 'Treeselect') was not found in 'vue-treeselectjs'

Using named import syntax for default export incorrectly.

fix

Use default import: import Treeselect from 'vue-treeselectjs'. Do not use destructuring braces for the default export.

Cannot use 'v-model' on a component that does not support the 'modelValue' prop

Vue 2 vs Vue 3 mismatch: v-model on Vue 3 requires 'modelValue' prop and 'update:modelValue' event.

fix

Make sure you are using Vue 3 (the component is for Vue 3 only).

Upgrade

Version history

0.9.2latest on npm

Audit

Dependencies

vuerequiredPeer dependency; requires Vue 3.x to function.

Agent activity

23 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/dipson88/treeselectjs ↗

packagevue-treeselectjs ↗

homepagehttps://github.com/dipson88/treeselectjs/tree/main/packages/vue-treeselectjs#readme ↗