Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
SlVueTree
✓ import SlVueTree from 'sl-vue-tree';
✗ const SlVueTree = require('sl-vue-tree');
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.
ISlTreeNodeModel
✓ import type { ISlTreeNodeModel } from 'sl-vue-tree';
✗ import { ISlTreeNodeModel } from 'sl-vue-tree';
This is a TypeScript interface; use `import type` for clarity and to ensure it's stripped from the compiled JavaScript.
ISlTreeNode
✓ import type { ISlTreeNode } from 'sl-vue-tree';
This is a TypeScript interface providing enhanced node properties; use `import type`.
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`.
<template>
<div id="app">
<sl-vue-tree v-model="nodes" class="sl-vue-tree-dark" />
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import SlVueTree from 'sl-vue-tree';
import type { ISlTreeNodeModel } from 'sl-vue-tree';
import 'sl-vue-tree/dist/sl-vue-tree-dark.css'; // Import the default dark theme CSS
interface CustomNodeData {
visible?: boolean;
}
export default defineComponent({
name: 'App',
components: {
SlVueTree,
},
setup() {
const nodes = ref<ISlTreeNodeModel<CustomNodeData>[]>([
{ title: 'Item1', isLeaf: true },
{ title: 'Item2', isLeaf: true, data: { visible: false } },
{ title: 'Folder1' },
{
title: 'Folder2', isExpanded: true, children: [
{ title: 'Item3', isLeaf: true },
{ title: 'Item4', isLeaf: true }
]
}
]);
return {
nodes,
};
},
});
</script>
<style>
/* Optional: Add custom styles here or override theme variables */
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
margin-top: 60px;
height: 500px; /* Give the tree some height */
width: 400px; /* Give the tree some width */
border: 1px solid #eee;
padding: 10px;
}
</style>
Debug
Known issues
gotchaThe `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.fixAdd `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.
affects: >=1.0.0
gotchaThe 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.fixFor 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`.
affects: >=1.0.0 (especially when used with Vue 3)
gotchaWhen 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.fixDefine 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. affects: >=1.0.0
Errors
Common errors & fixes
Error: Cannot find module 'sl-vue-tree/dist/sl-vue-tree-dark.css'
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.
fixVerify 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.
Component is not registered: <sl-vue-tree>
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.
fixEnsure `SlVueTree` is imported and registered in the `components` option of your Vue component (e.g., `components: { SlVueTree }`) or globally registered if applicable. 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>'.
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.
fixDouble-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.
Audit
Dependencies
vuerequiredPeer dependency for component rendering and framework integration.