Building a Simple Kanban Board with Drag and Drop in Vue 3 and Tailwind CSS — Part 4: Deleting Tasks

In the previous parts of our series (Part 1, Part 2, Part 3), we learned how to create a simple Kanban Board with drag-and-drop functionality, add new tasks, and display task details in a modal.

Note: This article is part of a series. Not all files discussed in this article are required for the Kanban Board application to function. Start with the first article to get the full context.

In this installment, we introduce the ability to delete tasks. Utilizing the Vue 3 composables pattern, we will encapsulate the deletion logic, making our application more modular and maintainable. Let’s dive into implementing this new feature.

File Structure

src/
|-- composables/
|   |-- useDeleteTask.js
|-- components/
    |-- KanbanBoard.vue
    |-- TaskDetailsModal.vue
    |-- KanbanColumn.vue (No changes required)
    |-- AddTaskButton.vue
    |-- TaskModal.vue

Implementing Task Deletion

First, let’s look at the useDeleteTask composable, where we define the logic for deleting tasks.

useDeleteTask.js:

export function useDeleteTask() {
  const deleteTask = (cards, taskId) => {
    const…