Kanban Task Board with Vue
A collaborative kanban board with drag-and-drop, labels, due dates and offline-friendly state.
- Published
- Video length10 min
Watch on YouTube
Subscribe on YouTube to unlock the source code below.
Source code
Get the Source Code
Everything built in the video, ready to run. Delivered as a ZIP download.
What's included
- Complete Vue 3 project
- README with setup notes
Setup instructions
- Unzip the archive and open the folder in your editor.
- Run npm install.
- Run npm run dev.
About this project
A polished task board in the spirit of the tools you use every day: boards, columns, cards, labels, due dates and quick filters, with optimistic updates so it always feels instant.
This is the ideal starter project, small enough to finish in one video, rich enough to teach real component design.
Features
- Multiple boards and columns
- Drag-and-drop cards
- Labels and due dates
- Quick filters
- Optimistic updates
- Keyboard shortcuts
What you will learn
- Composition API patterns
- Drag-and-drop without a heavy library
- State management with Pinia
- Persisting state locally
Screenshots
About this video
- Episode
- E02
- Category
- Web Applications
- Published
- Apr 30, 2026
- Video length
- 10 min
- Access
- Subscribe on YouTube to unlock the download
- Vue
- TypeScript
- Tailwind CSS
Reviews & comments
Reviews & comments
Built it yourself? Tell others how it went, or ask a question.
Leave a review