{"id":15627174,"url":"https://github.com/maxleiter/sortablejs-vue3","last_synced_at":"2025-05-16T05:00:15.818Z","repository":{"id":37708036,"uuid":"500352886","full_name":"MaxLeiter/sortablejs-vue3","owner":"MaxLeiter","description":"A thin wrapper around Sortable.js for Vue 3","archived":false,"fork":false,"pushed_at":"2024-01-29T21:41:46.000Z","size":713,"stargazers_count":398,"open_issues_count":38,"forks_count":24,"subscribers_count":8,"default_branch":"main","last_synced_at":"2025-05-10T08:04:49.278Z","etag":null,"topics":["drag-and-drop","sortablejs","typescript","vite","vue","vue2","vue3"],"latest_commit_sha":null,"homepage":"https://sortablejs-vue3.maxleiter.com","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/MaxLeiter.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"MaxLeiter"}},"created_at":"2022-06-06T08:33:16.000Z","updated_at":"2025-04-28T04:25:05.000Z","dependencies_parsed_at":"2024-06-18T15:19:15.201Z","dependency_job_id":"87940f6c-2f8f-420a-9ce0-f74dd6c19bb5","html_url":"https://github.com/MaxLeiter/sortablejs-vue3","commit_stats":{"total_commits":82,"total_committers":13,"mean_commits":"6.3076923076923075","dds":0.5121951219512195,"last_synced_commit":"2fbcb5321a1e6bb7d8c77a43843f6c96cafb780a"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MaxLeiter%2Fsortablejs-vue3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MaxLeiter%2Fsortablejs-vue3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MaxLeiter%2Fsortablejs-vue3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MaxLeiter%2Fsortablejs-vue3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MaxLeiter","download_url":"https://codeload.github.com/MaxLeiter/sortablejs-vue3/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254471028,"owners_count":22076582,"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-and-drop","sortablejs","typescript","vite","vue","vue2","vue3"],"created_at":"2024-10-03T10:15:33.364Z","updated_at":"2025-05-16T05:00:15.317Z","avatar_url":"https://github.com/MaxLeiter.png","language":"Vue","readme":"# SortableJS-vue3\n\n[Demo](https://sortablejs-vue3.maxleiter.com) | [npm](https://www.npmjs.com/package/sortablejs-vue3)\n\n![GIF of the demo being used](./readme/demo.gif)\n\nThis is a thin wrapper around the great [SortableJS](https://github.com/SortableJS/Sortable) library. I had many issues migrating from Vue.Draggable to vue.draggable.next, and after briefly investigating I decided that it was too complicated and a smaller solution was the answer. This wrapper attempts to keep you as close to Sortable as possible.\n\n### Why not use \\\u003cother library\\\u003e?\n\n- `Vue.Draggable` only supports Vue 2\n- `vue.draggable.next` uses the Options API, has multiple open (and afaict useful) pull requests, and had weird bugs/side-effects when I tried and used it\n- `shopify/draggable` and [`vue-shopify-dragable`](https://github.com/zjffun/vue-shopify-draggable) seemed promising but they don't supported nested components\n\n## Usage\n\nYou can see a demo with more complete code at [https://sortablejs-vue3.maxleiter.com](https://sortablejs-vue3.maxleiter.com).\n\n1. Install the package:\n\n```bash\npnpm add sortablejs-vue3 sortablejs\n```\n\nor\n\n```bash\nnpm install sortablejs-vue3 sortablejs\n```\n\n2. Import the component in your `\u003cscript setup\u003e` (or `\u003cscript\u003e`):\n\n```typescript\nimport { Sortable } from \"sortablejs-vue3\";\n```\n\n3. Use the component:\n\n```vue\n\u003ctemplate\u003e\n  \u003cmain\u003e\n    \u003cSortable\n      :list=\"elements\"\n      item-key=\"id\"\n      tag=\"div\"\n      :options=\"options\"\n    \u003e\n      \u003c-- The Header and Footer templates below are optional --\u003e\n      \u003ctemplate #header\u003e\n          \u003cheader\u003e\n            \u003ch1\u003eSortableJS Vue3 Demo\u003c/h1\u003e\n          \u003c/header\u003e\n      \u003c/template\u003e\n      \u003ctemplate #item=\"{element, index}\"\u003e\n        \u003cdiv class=\"draggable\" :key=\"element.id\"\u003e\n          {{ element.name }}\n        \u003c/div\u003e\n      \u003c/template\u003e\n      \u003ctemplate #footer\u003e\n          \u003cfooter class=\"draggable\"\u003eA footer\u003c/footer\u003e\n      \u003c/template\u003e\n    \u003c/Sortable\u003e\n\u003c/template\u003e\n```\n\n4. The `list` and `item-key` props are necessary. The `options` prop is an object that can contain any SortableJS option. You can find a full list of them here: https://github.com/SortableJS/Sortable#options\n   - The `tag` prop is optional and defaults to `div`. It's the HTML node type for the outer element of the included template/slot.\n\n### Props\n\n- `list` (`Array\u003cany\u003e`, required): your data to list\n- `itemKey` (`string` | `(item) =\u003e (string | number | Symbol)`, required): The name of the key present in each item in the list that corresponds to a unique value (to use as the `key`)\n- `tag` (`string`, optional, default = `\"div\"`): The element type to render as\n- `options` (`Object`, false): the SortableJS options minus event handlers (see below)\n\n### Events\n\nYou can listen to Sortable events by adding the listeners to the `Sortable` component. For example:\n\n```typescript\n\u003cSortable\n  :list=\"elements\"\n  item-key=\"id\"\n  @change=\"(event: Sortable.SortableEvent) =\u003e void\"\n  @choose=\"(event: Sortable.SortableEvent) =\u003e void\"\n  @unchoose=\"(event: Sortable.SortableEvent) =\u003e void\"\n  @start=\"(event: Sortable.SortableEvent) =\u003e void\"\n  @end=\"(event: Sortable.SortableEvent) =\u003e void\"\n  @add=\"(event: Sortable.SortableEvent) =\u003e void\"\n  @update=\"(event: Sortable.SortableEvent) =\u003e void\"\n  @sort=\"(event: Sortable.SortableEvent) =\u003e void\"\n  @remove=\"(event: Sortable.SortableEvent) =\u003e void\"\n  @filter=\"(event: Sortable.SortableEvent) =\u003e void\"\n  @move=\"(event: Sortable.MoveEvent, event2: Event) =\u003e void\"\n  @move.capture=\"(event: Sortable.MoveEvent, event2: Event) =\u003e boolean | -1 | 1\"\n  @clone=\"(event: Sortable.SortableEvent) =\u003e void\"\n\u003e\n```\n\n### Using plugins\n\nYou need to mount any plugins you want outside of [the default](https://github.com/SortableJS/Sortable#plugins) before importing this library. For example, the below is correct:\n\n```typescript\nimport SortableJs from \"sortablejs\";\nimport { Swap } from \"sortablejs/modular/sortable.core.esm\";\nSortableJs.mount(new Swap());\n\nimport { Sortable } from \"sortablejs-vue3\";\n```\n\n### Use with a store\n\nNo changes are necessary to work with Vuex or another store. Just pass `store.state.items` as your list. To modify your data you need to manually listen to the events and calculate the new position with `event.oldIndex` and `event.newIndex` with something like the following:\n\n```typescript\nconst moveItemInArray = \u003cT\u003e(array: T[], from: number, to: number) =\u003e {\n  const item = array.splice(from, 1)[0];\n  nextTick(() =\u003e array.splice(to, 0, item));\n};\n\nonEnd(event) { moveItemInArray(store.state.items, event.oldIndex, event.newIndex) }\n```\n\nYou may also want to see the SortableJS store documentation [here](https://github.com/SortableJS/Sortable#store).\n\n### Examples\n\n- [./src/examples/WithStore.vue](./src/examples/WithStore.vue) - A simple example with a store\n\n## Development\n\n1. Run `pnpm` to install dependencies\n2. `pnpm dev` will start a web server with live reloading\n3. `pnpm build` will build the production library files\n4. `pnpm build:site` will build the demo website\n\n### Recommended IDE Setup\n\n- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)\n","funding_links":["https://github.com/sponsors/MaxLeiter"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxleiter%2Fsortablejs-vue3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaxleiter%2Fsortablejs-vue3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxleiter%2Fsortablejs-vue3/lists"}