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

This repository contains the source code for 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.

Checkout the course on vueschool.io

Project Based Off of the Nuxt 3 Minimal Starter

Look at the Nuxt 3 documentation to learn more.

Setup

Make sure to install the dependencies:

# yarn
yarn install

# npm
npm install

# pnpm
pnpm install --shamefully-hoist

Development Server

Start the development server on http://localhost:3000

npm run dev

Production

Build the application for production:

npm run build

Locally preview production build:

npm run preview

Check out the deployment documentation for more information.