Building a Simple Kanban Board with Drag and Drop in Vue 3 and Tailwind CSS — Part 3: Displaying Task Details in a Modal

In the previous parts of our series (Part 1, Part 2), we learned how to create a simple Kanban Board with drag-and-drop functionality and how to add new tasks to our board. In this installment, we will add the functionality to display task details in a modal. At this stage, our tasks have only names, but we will expand them with more information in future parts.

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.

Step 1: Modifying the KanbanCard Component

The first step is to adjust the KanbanCard component to include an icon that, when clicked, activates a modal with task details.

KanbanCard.vue

<template>
  <div
    class="kanban-card bg-gray-100 rounded shadow p-3 mb-2 flex justify-between items-center"
    draggable="true"
  >
    {{ card.title }}
    <svg @click.stop="emitOpenDetails" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 cursor-pointer">
      <path stroke-linecap="round"…