Fluid DnD
[](https://github.com/carlosjorger/vue-fluid-dnd/blob/main/LICENSE)
[](https://www.npmjs.com/package/vue-fluid-dnd)
[](https://twitter.com/carlosjorgerc)
[](https://codeclimate.com/github/carlosjorger/vue-fluid-dnd/test_coverage)
Vue Fluid DnD is a [**fluid**, **smooth** and **versatil** drag and drop
library for lists on Vue 3](https://vue-fluid-dnd.netlify.app/). It's a**lightweight** tool ~7 Kb (gzip) with no depenencies. This library is a **Vue Draggable Next** alternative if you looking for a better ui experience.
## π§° Features
- β
**Fully customizable π¨**.
- β
**Zero dependencies πͺΆ**.
- β
**Work with horizontalβ‘οΈand vertical list :arrow_down:**.
- β
**Mouse π and touch ππ± (mobile, tablet and so on) support**.
- β
**Nice documentation π and examples**.
- β
**Fully tested π§ͺ, typed and reliable**.
## β¨ Inspirations
- β
π₯ Animations by [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd)
- β
π¨ Api by [Drag & Drop by Formkit](https://drag-and-drop.formkit.com/)
- β
π§° Features by [Vue.Draggable](https://github.com/SortableJS/Vue.Draggable)
## π Getting Started
1. **Install fluid-dnd:**
```bash
# with npm:
npm i fluid-dnd
# with yarn:
yarn add fluid-dnd
# with pnpm:
pnpm i fluid-dnd
```
3. **Documentation**
- π Check out all the [docs](https://vue-fluid-dnd.netlify.app/).
- π οΈ Edit the previous [here](https://codesandbox.io/s/nifty-hooks-5plkpl).
- π See others examples [here](https://vue-fluid-dnd.netlify.app/example/vertical-list/single-vertical-list/).
## π€ Contributing
If you're interested in contributing to [vue-fluid-dnd](https://github.com/carlosjorger/vue-fluid-dnd), please read our contributing docs before submitting a pull request [CONTRIBUTING](./CONTRIBUTING.md).
## π License
- [MIT](https://github.com/carlosjorger/vue-fluid-dnd/blob/main/LICENSE).