{"id":14022,"library":"sl-vue-tree","title":"sl-vue-tree","description":"sl-vue-tree is a customizable and draggable tree component designed for Vue.js applications. Currently stable at version 1.8.5, it provides a robust solution for displaying hierarchical data with interactive features such as drag-and-drop reordering, multiselection, and branch expansion/collapse. While an explicit release cadence isn't detailed in the provided documentation, the package has seen consistent updates in its 1.x line. Its key differentiators include comprehensive TypeScript type definitions for nodes (`ISlTreeNodeModel`, `ISlTreeNode`), allowing for strongly-typed data manipulation, and a flexible API that exposes various props and events for fine-grained control over tree behavior and appearance, including customizable styling via CSS themes. It is particularly suited for applications requiring complex hierarchical data management with an emphasis on user interaction.","status":"active","version":"1.8.5","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","vue","tree","draggable","sortable","typescript"],"install":[{"cmd":"npm install sl-vue-tree","lang":"bash","label":"npm"},{"cmd":"yarn add sl-vue-tree","lang":"bash","label":"yarn"},{"cmd":"pnpm add sl-vue-tree","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for component rendering and framework integration.","package":"vue","optional":false}],"imports":[{"note":"The component is typically consumed as a default export in modern ES module setups (Vue CLI, Vite). CommonJS `require` is not the idiomatic approach for Vue SFCs.","wrong":"const SlVueTree = require('sl-vue-tree');","symbol":"SlVueTree","correct":"import SlVueTree from 'sl-vue-tree';"},{"note":"This is a TypeScript interface; use `import type` for clarity and to ensure it's stripped from the compiled JavaScript.","wrong":"import { ISlTreeNodeModel } from 'sl-vue-tree';","symbol":"ISlTreeNodeModel","correct":"import type { ISlTreeNodeModel } from 'sl-vue-tree';"},{"note":"This is a TypeScript interface providing enhanced node properties; use `import type`.","symbol":"ISlTreeNode","correct":"import type { ISlTreeNode } from 'sl-vue-tree';"}],"quickstart":{"code":"<template>\n  <div id=\"app\">\n    <sl-vue-tree v-model=\"nodes\" class=\"sl-vue-tree-dark\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, ref } from 'vue';\nimport SlVueTree from 'sl-vue-tree';\nimport type { ISlTreeNodeModel } from 'sl-vue-tree';\nimport 'sl-vue-tree/dist/sl-vue-tree-dark.css'; // Import the default dark theme CSS\n\ninterface CustomNodeData {\n  visible?: boolean;\n}\n\nexport default defineComponent({\n  name: 'App',\n  components: {\n    SlVueTree,\n  },\n  setup() {\n    const nodes = ref<ISlTreeNodeModel<CustomNodeData>[]>([\n      { title: 'Item1', isLeaf: true },\n      { title: 'Item2', isLeaf: true, data: { visible: false } },\n      { title: 'Folder1' },\n      {\n        title: 'Folder2', isExpanded: true, children: [\n          { title: 'Item3', isLeaf: true },\n          { title: 'Item4', isLeaf: true }\n        ]\n      }\n    ]);\n\n    return {\n      nodes,\n    };\n  },\n});\n</script>\n\n<style>\n/* Optional: Add custom styles here or override theme variables */\n#app {\n  font-family: Avenir, Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  color: #2c3e50;\n  margin-top: 60px;\n  height: 500px; /* Give the tree some height */\n  width: 400px; /* Give the tree some width */\n  border: 1px solid #eee;\n  padding: 10px;\n}\n</style>","lang":"typescript","description":"This quickstart demonstrates a basic `sl-vue-tree` integration within a modern Vue 3 Single File Component (SFC) using TypeScript. It initializes a reactive tree structure, imports the necessary component and its default dark theme CSS, and binds the tree data using `v-model`."},"warnings":[{"fix":"Add `import 'sl-vue-tree/dist/sl-vue-tree-dark.css';` (or `sl-vue-tree-light.css`) to your main application entry point or the component where `sl-vue-tree` is used.","message":"The `sl-vue-tree` component requires explicit CSS import for styling. Forgetting to import a theme file (e.g., `sl-vue-tree-dark.css` or `sl-vue-tree-light.css`) will result in an unstyled, potentially unusable tree component.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"For Vue 2: `v-model=\"nodes\"`. For Vue 3, consider explicitly binding as `:value=\"nodes\" @input=\"nodes = $event\"` or configure the component to use `modelValue` if adapted for Vue 3 best practices, though the `v-model` as shown in the README should work via Vue 3's compatibility layer if not explicitly overriding `modelValue`.","message":"The component's `v-model` implementation relies on the `value` prop and `input` event, which is the standard pattern for Vue 2. When migrating to Vue 3, using `v-model=\"nodes\"` implicitly translates to `:modelValue=\"nodes\" @update:modelValue=\"nodes = $event\"` by default. For `sl-vue-tree`, you might need to use `:value=\"nodes\" @input=\"nodes = $event\"` or ensure your Vue 3 setup correctly maps `v-model` to the `value` prop through `v-model:value` for full compatibility.","severity":"gotcha","affected_versions":">=1.0.0 (especially when used with Vue 3)"},{"fix":"Define a specific interface for your node's custom data, e.g., `interface MyNodeData { id: number; metadata: string; }`, and then use `ISlTreeNodeModel<MyNodeData>` for your node arrays.","message":"When using TypeScript, if `TDataType` for `ISlTreeNodeModel<TDataType>` is not explicitly defined, it defaults to `any`, which reduces type safety. Custom `data` properties on nodes will not be strictly checked.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"search_vec":"'1':68 '1.8.5':24 'allow':83 'api':93 'appear':109 'applic':19,121 'behavior':107 'branch':46 'cadenc':52 'complex':123 'compon':15 'comprehens':75 'consist':64 'control':104 'css':114 'current':20 'customiz':11,111 'data':33,88,125 'definit':78 'design':16 'detail':55 'differenti':73 'display':31 'document':59 'drag':40 'drag-and-drop':39 'draggabl':13,136 'drop':42 'emphasi':129 'event':99 'expansion/collapse':47 'explicit':50 'expos':95 'featur':36 'fine':102 'fine-grain':101 'flexibl':92 'grain':103 'hierarch':32,124 'includ':74,110 'interact':35,132 'isltreenod':82 'isltreenodemodel':81 'isn':53 'javascript':133 'key':72 'line':70 'manag':126 'manipul':89 'multiselect':44 'node':80 'packag':61 'particular':118 'prop':97 'provid':26,58 'releas':51 'reorder':43 'requir':122 'robust':28 'seen':63 'sl':2,6 'sl-vue-tre':1,5 'solut':29 'sortabl':137 'stabl':21 'strong':86 'strongly-typ':85 'style':112 'suit':119 'theme':115 'tree':4,8,14,106,135 'type':77,87 'typescript':76,138 'updat':65 'user':131 'various':96 'version':23 'via':113 'vue':3,7,134 'vue.js':18 'x':69","created_at":"2026-04-20T01:57:31.633042+00:00","updated_at":"2026-04-20T01:57:31.633042+00:00","problems":[{"fix":"Verify the exact path to the CSS file (e.g., `sl-vue-tree/dist/sl-vue-tree-dark.css`) and ensure it's correctly included in your project's `node_modules` and accessible by your build system. Check `node_modules/sl-vue-tree/dist` for available CSS files.","cause":"The CSS file for the tree's styling is not found at the specified path, likely due to a typo, incorrect build configuration, or missing package files.","error":"Error: Cannot find module 'sl-vue-tree/dist/sl-vue-tree-dark.css'"},{"fix":"Ensure `SlVueTree` is imported and registered in the `components` option of your Vue component (e.g., `components: { SlVueTree }`) or globally registered if applicable.","cause":"The `sl-vue-tree` component was used in a template but was not registered with the Vue application or component where it's being used.","error":"Component is not registered: <sl-vue-tree>"},{"fix":"Double-check the `ISlTreeNodeModel` definition (it typically includes `title`, `isLeaf`, `children`, etc.). Ensure your objects conform to this interface. If this error persists, it might indicate an issue with your `sl-vue-tree` package installation or TypeScript configuration.","cause":"This TypeScript error indicates a version mismatch or incorrect type definition usage where the `ISlTreeNodeModel` interface might be different from expected, or your object literal does not conform to the expected properties of the interface.","error":"Type '{ title: string; isLeaf: boolean; }' is not assignable to type 'ISlTreeNodeModel<any>'. Object literal may only specify known properties, and 'title' does not exist in type 'ISlTreeNodeModel<any>'."}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":null,"docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/sl-vue-tree","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}