{"id":13810579,"url":"https://github.com/rhwilr/vue-nestable","last_synced_at":"2025-05-14T10:34:16.417Z","repository":{"id":41226506,"uuid":"150386471","full_name":"rhwilr/vue-nestable","owner":"rhwilr","description":"A simple drag \u0026 drop hierarchical list made as a vue component.","archived":false,"fork":false,"pushed_at":"2024-06-25T17:27:16.000Z","size":1817,"stargazers_count":318,"open_issues_count":7,"forks_count":68,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-04-21T01:06:44.622Z","etag":null,"topics":["drag","vue","vue-components","vue-nestable"],"latest_commit_sha":null,"homepage":"https://rhwilr.github.io/vue-nestable/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rhwilr.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-26T07:31:40.000Z","updated_at":"2025-01-03T13:02:31.000Z","dependencies_parsed_at":"2022-07-16T23:31:11.845Z","dependency_job_id":null,"html_url":"https://github.com/rhwilr/vue-nestable","commit_stats":null,"previous_names":[],"tags_count":27,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rhwilr%2Fvue-nestable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rhwilr%2Fvue-nestable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rhwilr%2Fvue-nestable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rhwilr%2Fvue-nestable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rhwilr","download_url":"https://codeload.github.com/rhwilr/vue-nestable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254121303,"owners_count":22018140,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["drag","vue","vue-components","vue-nestable"],"created_at":"2024-08-04T02:01:01.032Z","updated_at":"2025-05-14T10:34:11.401Z","avatar_url":"https://github.com/rhwilr.png","language":"Vue","funding_links":[],"categories":["Vue","Components \u0026 Libraries","UI Components [🔝](#readme)","UI Components"],"sub_categories":["UI Components","Form"],"readme":"# vue-nestable\n\nDrag \u0026 drop hierarchical list made as a vue component.\n\n[![NPM Version][npm-image]][npm-url]\n[![Build Status][travis-image]][travis-url]\n\n[npm-image]: https://img.shields.io/npm/v/vue-nestable.svg?style=flat-square\n[npm-url]: https://www.npmjs.com/package/vue-nestable\n\n[travis-image]: https://img.shields.io/travis/rhwilr/vue-nestable/master.svg?style=flat-square\n[travis-url]: https://travis-ci.org/rhwilr/vue-nestable\n\n\n\u003e This package is currently only compatible with Vue 2. Vue 3 compatibility\n\u003e may be added in the future, though there are currently no plans for it.\n\n\n\u003chr /\u003e\n\n\n## Goals\n  - A simple vue component to create a draggable list to customizable items\n  - Reorder items by dragging them above another item\n  - Intuitively nest items by dragging right\n  - Fully customizable, ships with no CSS\n  - Everything is configurable: item identifier, max nesting level, threshold\n    for nesting\n\n\n## Table of contents\n  * [Demo](#Demo)\n  * [Installation](#installation)\n  * [Usage](#usage)\n  * [Example](#example)\n  * [Styling](#styling)\n  * [Props](#props)\n  * [Slots](#slots)\n  * [Events](#events)\n  * [Hooks](#hooks)\n\n\n## Demo\n\n[Live Demo](https://rhwilr.github.io/vue-nestable/)\n\n\n## Installation\n\nInstall the plugin:\n\n```sh\nnpm install --save vue-nestable\n```\n\nUse the plugin in your app:\n\n```js\nimport Vue from 'vue'\nimport VueNestable from 'vue-nestable'\n\nVue.use(VueNestable)\n```\n\nYou can also import the components on-demand, if you wish to do so:\n```js\nimport { VueNestable, VueNestableHandle } from 'vue-nestable'\n\nexport default {\n  components: {\n    VueNestable,\n    VueNestableHandle\n  }\n  ...\n}\n```\n\n\n## Example\n\nYou only need two components: `vue-nestable` which renders the list and\n`vue-nestable-handle` which indicates the area the user can drag the item by.\n\n**Important Note:** Each item must have a unique `id` property and it must be a\nvalid css class name. It can not contain a `:`, `,`, `.`, `;` or other special\ncharacters that are invalid in a css class name.\n\n```html\n\u003ctemplate\u003e\n\n  \u003cvue-nestable v-model=\"nestableItems\"\u003e\n    \u003cvue-nestable-handle\n      slot-scope=\"{ item }\"\n      :item=\"item\"\u003e\n      {{ item.text }}\n    \u003c/vue-nestable-handle\u003e\n  \u003c/vue-nestable\u003e\n\n\u003c/template\u003e\n\n\u003cscript type=\"text/babel\"\u003e\nexport default {\n  data () {\n    return {\n      nestableItems: [\n        {\n          id: 0,\n          text: 'Andy'\n        }, {\n          id: 1,\n          text: 'Harry',\n          children: [{\n            id: 2,\n            text: 'David'\n          }]\n        }, {\n          id: 3,\n          text: 'Lisa'\n        }\n      ]\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n\n## Styling\n\nBy default, vue-nestable comes without any styling. Which means you can\ncustomize the appearance completely to your needs. However, if you want you can\ntake a look at the style used in the demo:\n[example/assets/vue-nestable.css](example/assets/vue-nestable.css)\n\n\n## Props\n\nThe following props can be passed to the `\u003cVueNestable\u003e` Component:\n\n| Property     | Type                | Default       | Description                                                                                                                                                                                                                     |\n| :----------- | :------------------ | :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| value        | Array               | [ ]           | Array of objects to be used in the list. **Important:** Each item must have a unique key by which it can be identified. By default the key is assumed to be named `id` but you can change it by setting the `keyProp` property. |\n| threshold    | Number              | 30            | Amount of pixels by which the mouse must be move horizontally before increasing/decreasing level (nesting) of current element.                                                                                                  |\n| maxDepth     | Number              | 10            | Maximum available level of nesting. Setting this to 0 will prevent dragging altogether.                                                                                                                                         |\n| group        | String or Number    | random String | Different group numbers may be passed if you have more than one nestable component on a page and want some extra styles for portal instances.                                                                                   |\n| keyProp      | String *(Optional)* | 'id'          | Name of the property that uniquely identifies an item.                                                                                                                                                                          |\n| childrenProp | String *(Optional)* | 'children'    | Name of the property that holds an array of children.                                                                                                                                                                           |\n| class        | String *(Optional)* | null          | Name of the property for classes to add to the item.                                                                                                                                                                            |\n| hooks        | Object *(Optional)* | {}            | Allows you to register hooks that fire whenever vue-nestable performs some action                                                                                                                                               |\n| rtl        | Boolean *(Optional)* | false            | Add rtl support to vue-nestable                                                                                                                                               |\n\n\n## Slots\n\nThe `\u003cVueNestable\u003e` Component has two slots that can be used to render items and\na placeholder. See [Example](example/components/NoItems.vue) for an example on\nhow to use them.\n\n| Slot Name   | Props                      | Description                                                                                                   |\n| :---------- | :------------------------- | :------------------------------------------------------------------------------------------------------------ |\n| default     | `item`, `index`, `isChild` | This slot is used to render the items in the list, use the scoped-slot property `item` to render the element. |\n| placeholder |                            | Lets you define a custom template that is used when no elements are in the list                               |\n\n\n## Events\n\nEvents are triggered when an item was moved or when a drag operation was\ncompleted. When you use `v-model` to bind your data, the `@input` event will\nautomatically be handled.\n\n| Event  | Parameters         | Description                                                                                                                                                   |\n| :----- | :----------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| input  | `value`            | triggered whenever the list changes                                                                                                                           |\n| change | `value`, `options` | triggered when the user dropped the item. `options` is passed as the second parameter in the event and contains the following properties: `{ items, pathTo }` |\n\n\n## Hooks\n\nHooks allow you to get finer controll over which items can be moved or take\naction when a specific item is moved.\n\nHooks are passed as an Object to the `:hooks` prop. The object defines a key\nwith the hook name and a function that will be called when the hook fires.\n\n```js\n{\n  'beforeMove': this.myHookFunction\n}\n```\n\nLook [here](example/components/Advanced.vue) of an example on how to prevent one\nitem from being moved.\n\n\n| Hook Name     | Parameters                       | Description                                                                                  |\n| :------------ | :------------------------------- | :------------------------------------------------------------------------------------------- |\n| beforeMove    | `{ dragItem, pathFrom, pathTo }` | Fires when an item is about to be moved. Returning `false` will cancel that action.          |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frhwilr%2Fvue-nestable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frhwilr%2Fvue-nestable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frhwilr%2Fvue-nestable/lists"}