vue3-nestable v3.0.3

vue3-nestable

Drag & drop hierarchical list made as a vue component.

Vue 3 support 🥳

This package is currently compatible with Vue 3

Goals

• A simple vue component to create a draggable list to customizable items
• Reorder items by dragging them above another item
• Intuitively nest items by dragging right
• Fully customizable, ships with no CSS
• Everything is configurable: item identifier, max nesting level, threshold for nesting

Table of contents

• Installation
• Usage
• Example
• Styling
• Props
• Slots
• Events
• Hooks

Installation

Install the plugin:

npm install --save vue3-nestable
yarn add vue3-nestable

You can also import the components on-demand, if you wish to do so:

import { VueNestable, VueNestableHandle } from 'vue3-nestable'

export default {
  components: {
    VueNestable,
    VueNestableHandle
  }
  ...
}

Example

You only need two components: vue-nestable which renders the list and vue-nestable-handle which indicates the area the user can drag the item by.

Important Note: Each item must have a unique id property and it must be a valid css class name. It can not contain a :, ,, ., ; or other special characters that are invalid in a css class name.

<template>

  <vue-nestable :value="nestableItems" @input="nestableItems = $event">
    <template v-slot="slot">
      <vue-nestable-handle>
        {{ slot.item.text }}
      </vue-nestable-handle>
    </template>
  </vue-nestable>

  <pre>
    <code>
      {{ nestableItems }}
    </code>
  </pre>
</template>

<script>
  import { VueNestable, VueNestableHandle } from 'vue3-nestable'

  export default {
    components: {
      VueNestable,
      VueNestableHandle,
    },
    data: () => ({
      nestableItems: [
        {
          id: 0,
          text: 'Andy'
        }, {
          id: 1,
          text: 'Harry',
          children: [{
            id: 2,
            text: 'David 1',
            children: [{
              id: 3,
              text: 'David 2'
            }, {
              id: 4,
              text: 'Lisa'
            }]
          }, {
            id: 5,
            text: 'Lisa 2'
          }, {
            id: 6,
            text: 'Lisa 3'
          }]
        }, {
          id: 7,
          text: 'Lisa 4'
        }
      ]
    })
  }
</script>

Styling

By default, vue3-nestable comes without any styling. Which means you can customize the appearance completely to your needs.

Props

The following props can be passed to the <VueNestable> Component:

Slots

The <VueNestable> Component has two slots that can be used to render items and a placeholder.

Events

Events are triggered when an item was moved or when a drag operation was completed. When you use v-model to bind your data, the @input event will automatically be handled.

Hooks

Hooks allow you to get finer controll over which items can be moved or take action when a specific item is moved.

Hooks are passed as an Object to the :hooks prop. The object defines a key with the hook name and a function that will be called when the hook fires.

{
  'beforeMove': this.myHookFunction
}