🌳 Vue Tree View

Vue Tree View is a powerful and flexible Vue 3 component developed by BigPlay for rendering hierarchical trees and graphs.

It supports:

• Vertical and horizontal orientation
• Right-to-left horizontal layout
• Expand/collapse of nodes
• Zoom and drag support
• Custom node slots for full styling control
• Extra links (multiple parents for one child)

Perfect for org charts, process flows, category trees, and any hierarchical data visualization.

🚀 Installation

npm install @bigplay/vue-tree-view d3

📖 Usage

Import styles (REQUIRED)

// Option 1: Import component with styles bundled
import { TreeView } from '@bigplay/vue-tree-view/dist/index-with-styles.es.js'

// Option 2: Import styles separately
import { TreeView } from '@bigplay/vue-tree-view'
import '@bigplay/vue-tree-view/dist/style.css'

Basic Example

    <script setup>
    import { TreeView } from '@bigplay/vue-tree-view/dist/index-with-styles.es.js'

    const data = {
    name: "Root",
    children: [
        { name: "Child 1" },
        { 
        name: "Child 2",
        children: [
            { name: "Grandchild 1" },
            { name: "Grandchild 2" }
        ]
        }
    ]
    }
    </script>

    <template>
    <TreeView :dataset="data" />
    </template>

Custom Node Slot

<TreeView :dataset="data">
  <template #node="{ node }">
    <div style="padding:6px 12px; border:1px solid #ccc; border-radius:8px; background:#fff;">
      <strong>{{ node.name }}</strong>
    </div>
  </template>
</TreeView>

⚙️ Props

| Prop | Type | Default | Description | | ----------------- | ------- | ---------------------------------------------------- | ------------------------------------------------ | | dataset | Object | — (required) | Tree data (name, children, etc.) | | config | Object | { nodeWidth:100, nodeHeight:100, levelHeight:200 } | Node size and spacing configuration | | direction | String | "vertical" | "vertical", "horizontal", "horizontal-rtl" | | linkStyle | String | "straight" | "straight" or "curve" | | collapseEnabled | Boolean | true | Enable expand/collapse on node click |

🎨 Styling

You can fully customize nodes with the node slot. CSS classes available:

• .link — tree links (SVG path)
• .node-slot — node container

📜 License

MIT © 2025 BigPlay