real-world-vue VS Vue.Draggable

Vue mastery goes for quality over quantity, and is the best choice.

I took Maximilan's course a few years ago and it was good, but I think he is just rehashing the Vue's doc, most of his early sections are identical to the Vue doc. Maybe he updated his course with more personal thoughts and approach. You can check the official Vue by yourself or trying Vue mastery or Vue school they are both good

As a Frontend Engineer, I have found certain platforms and tutors who are known for publishing quality content. They include Frontend Masters, Framework documentation sites (e.g Vue and React), Vue School, Vue Mastery, Scrimba, and courses by Michael Thiessen, Maximilian Schwarzmuller and The Net Ninja.

I’m a dev that has some knowledge on React and Vue. Several months ago, I just started a new project using React with Gatsby, but every time I'm working with it, my gut feeling was telling me "this might be easier to use with Vue". I had to refer so many times to the docs and the one course I bought for Stephen Grider. Last month, I bought some advanced courses for VueSchool and VueMastery. I then started another project using Gridsome and Vue, and was impressed by how straightforward it was to incorporate routes and components.

So if I’m going for a MEVN stack, I might either get Vue School, Vue Mastery, or Maximillian’s Udemy course afterwards. I know people mention to just read the docs but maybe having a guided tutorial + the docs might be the best way to learn Vue for me. I also think it’s different for everyone. I’m also thinking of attending conferences like Vue Nation or Connect.Tech. If you have any other suggestions, please let me know!

Vue Mastery is a great resource that covers not just Vue.js but also related technologies such as Vuetify. They offer courses on Nuxt.js and advanced design, among other things.

I really enjoyed the Vue Mastery course. It even includes a series where Evan You builds a bare bones version of Vue from scratch. https://www.vuemastery.com/

We use https://www.vuemastery.com to teach new team members about Vue. I'm sure you have sufficient JS to understand it.

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