Liquor Tree

Documentation

A Vue 3 tree component for rendering and interacting with hierarchical data.

This port aligns the original Liquor Tree feature set with the Vue 3 ecosystem and event model, and is published on npm as liquor-tree-vue3.

Features

• drag & drop between nodes
• mobile-friendly interactions
• granular events for every action
• flexible configuration with runtime API access
• any number of instances on the same page
• multi-selection and checkbox modes
• keyboard navigation & filtering helpers
• built-in Vuex 4 integration hooks

Installation

npm install liquor-tree-vue3
# or
yarn add liquor-tree-vue3

Migration hint

If you're upgrading from the Vue 2 build, update any stylesheet imports from style.css to liquor-tree.css (for example: import 'liquor-tree-vue3/dist/liquor-tree.css').

Usage

<!-- App.vue -->
<template>
  <tree
    ref="tree"
    :data="items"
    :options="options"
  />
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import 'liquor-tree-vue3/dist/liquor-tree.css'

const tree = ref(null)

const items = [
  { text: 'Item 1' },
  { text: 'Item 2' },
  {
    text: 'Item 3',
    children: [{ text: 'Item 3.1' }, { text: 'Item 3.2' }]
  }
]

const options = {
  checkbox: true
}

let offSelected = () => {}

onMounted(() => {
  // Tree exposes its internal emitter via `tree.value.tree`
  offSelected = tree.value.tree.on('node:selected', () => {
    console.log('selected nodes', [...tree.value.tree.selected()])
  })
})

onBeforeUnmount(() => {
  offSelected()
})
</script>

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import LiquorTree from 'liquor-tree-vue3'
import 'liquor-tree-vue3/dist/liquor-tree.css'

createApp(App)
  .use(LiquorTree)
  .mount('#app')

Direct browser usage

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/liquor-tree-vue3/dist/liquor-tree.css"
/>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/liquor-tree-vue3/dist/liquor-tree.umd.js"></script>
<div id="app"></div>
<script>
  const { createApp } = Vue
  const app = createApp({
    template: `<tree :data="items"></tree>`,
    data: () => ({ items: [{ text: 'Root' }] })
  })

  app.component('tree', window.LiquorTree)
  app.mount('#app')
</script>

License

MIT