formkit VS Vue.Draggable

formkit/drag-and-drop is a relatively new, lightweight library developed by the team behind FormKit, a form framework for Vue. Unlike traditional drag-and-drop libraries that manipulate the DOM directly, this one takes a different approach: instead of physically moving elements around, it updates a underlying reactive data model that you provide. This means that rather than worrying about manually reordering elements, you let the library handle updates to your data structure, making it feel more like a natural extension of reactive frameworks.

The Vue ecosystem is packed with many great form validation libraries, VeeValidate, Vuelidate, and FormKit just to name a few.

if you're going to be dealing with forms then FormKit (not a UI library) is worth your time. It's an architecture-first form framework — can be used with any UI library if you prefer.

I probably say this too often, but I'm fascinated by how much the Vue ecosystem has been thriving lately. Recent releases of such awesome libraries like FormKit or Radix Vue are great examples of how well the Vue ecosystem has matured lately.

FormKit is a library that helps you build complex forms in Vue. It is built on top of Vue 3 and uses the composition API. It is very easy to use and has a lot of features. You can check out Formkit Website for more information.

If you're in the Vue space (and you will be if you're using Nuxt) then I highly recommend checking out FormKit (I'm one of the maintainers). It's not a UI library — it's a framework for managing your form architecture and data. Forms are some of the most complicated front-end work you'll do if you do them well and FormKit will save you many many tears. If you want a quick primer on "why formkit?" here's a 3-minute video that demonstrates how much simpler a FormKit form will be to manage vs one hand-written in Vue.

If your project requires building forms then FormKit can save you a lot of effort.

Starting with Beta 17 — FormKit ships with a new Zod plugin that you can use to validate your forms.

Unironically this, but it's called FormKit. 🥲

Vue Draggable is a library I seem to use constantly. If you need draggabilty then it’s a nice one to have. Changed a bit for vue 3 but still very useful.

U might search for something like this https://github.com/SortableJS/Vue.Draggable

Check out this example https://github.com/SortableJS/Vue.Draggable/blob/master/example/components/two-lists.vue

If you're using Vue JS for a while then you have probably used some plugins with it as well. For example the Vue Router is a plugin. And there are many other useful plugins available like vue-infinite-loading, vuedraggable etc. But sometimes you might not have a plugin available for your need in that case you'd have to write your own plugin. And guess what? To create a Vue plugin all you have to do is create a JavaScript file that exports a object with a install method in it. So inside the src folder let's create a folder called plugins and inside that will have a JavaScript file named MyPlugin.js

The output should look something like this But the list is not sortable so let make is sortable now. To do that we are going to use Vue.Draggable so install it by running npm i vuedraggable. Now you can import it and use it like a component. So to make our list sortable we simply have to wrap our list with draggable and we also have to use our todos for its v-model

But if you're looking for Vue specific solution, you can take a look at Vue.Draggable - VueJS 2 version, Vue 3 version which is also based on SortableJS library.

They might have used something like this for the list drag and drop.

Maybe look at the nested list function of https://github.com/SortableJS/Vue.Draggable

Maybe check out vue sortable instead of draggable. I think it covers your needs and it works with one wrap around your components. https://github.com/SortableJS/Vue.Draggable