Learn Vue JS course Learn Javascript and Vue JS Learn VueJS course Learn VueJS Tutorial

Build a Drag-and-Drop Trello Board with Vue.js

Get hands on with this fun Trello board project! Learn how to create a drag and drop interface with Vue Draggable, style it with Tailwind CSS, and enhance it with VueUse.

  • 16 lessons
  • 1 hr
  • Advanced
Illustration image of Build a Drag-and-Drop Trello Board with Vue.js

About the Build a Drag-and-Drop Trello Board with Vue.js course

In this course, we’ll create a functional and dynamic UI for managing tasks via a Trello style task board. We’ll start from nothing and end with a simple yet fully functional app. Create new tasks and columns. Drag and drop tasks to different columns. Drag and drop to re-order columns. Alt (or Option) drag to clone tasks and more!

This course focuses on teaching how to use the Vue draggable library but also gives you great insight into the workflow of all the facets of front-end dev, from marking up content, to styling it with Tailwind CSS, to advanced behavior with Vue and VueUse, and typing with TypeScript.