Building a Simple Vue.js Kanban Board: A Beginner’s Guide

Written by

FixTechToday

in

In the fast-paced world of project management and task organization, the Kanban board has emerged as a powerful visual tool. It helps teams visualize workflows, limit work in progress (WIP), and maximize efficiency. But what if you could build your own Kanban board, tailored to your specific needs and integrated seamlessly into your existing projects? This article offers a step-by-step guide to creating a simple Kanban board using Vue.js, a progressive JavaScript framework known for its approachable learning curve and flexibility. Whether you’re a beginner looking to expand your web development skills or an experienced developer seeking to leverage Vue.js for practical applications, this tutorial will provide a solid foundation for building interactive and dynamic web components.

Why Build a Kanban Board?

Kanban boards aren’t just trendy project management tools; they’re fundamentally about improving workflow. By visualizing tasks as they move through different stages – from ‘To Do’ to ‘In Progress’ to ‘Done’ – a Kanban board provides immediate insights into bottlenecks, helps prioritize tasks, and promotes a more streamlined and efficient workflow. While there are numerous Kanban board applications available (Trello, Asana, etc.), building your own offers several advantages:

  • Customization: Tailor the board to your exact requirements.
  • Learning: Deepen your understanding of Vue.js and web development principles.
  • Integration: Seamlessly integrate the board into existing projects.
  • Control: Own your data and control your application’s behavior.

This project is perfect for beginners because it introduces core Vue.js concepts in a practical context. You’ll learn about components, data binding, event handling, and conditional rendering – all essential building blocks for any Vue.js application.

Prerequisites

Before we dive into the code, ensure you have the following:

  • Basic HTML, CSS, and JavaScript knowledge: Familiarity with these web fundamentals is essential.
  • Node.js and npm (or yarn) installed: These are required to manage project dependencies.
  • A code editor: VS Code, Sublime Text, or any editor of your choice will work.
  • Vue CLI (optional, but recommended): The Vue CLI simplifies project setup. Install it globally by running npm install -g @vue/cli in your terminal.

Step-by-Step Guide

1. Project Setup

Let’s start by setting up our Vue.js project. We’ll use the Vue CLI to streamline this process. If you don’t have the Vue CLI installed, install it globally using the command mentioned above.

Open your terminal or command prompt and navigate to the directory where you want to create your project. Then, run the following command:

vue create vue-kanban-board

The Vue CLI will prompt you to select a preset. Choose the default preset (babel, eslint) for a basic setup. Alternatively, you can manually select features. Once the project is created, navigate into the project directory:

cd vue-kanban-board

Now, let’s start the development server:

npm run serve

This will start a development server, and you should see your basic Vue.js application running in your browser, typically at http://localhost:8080/.

2. Project Structure and Component Breakdown

Our Kanban board will consist of a few key components. Let’s outline the structure:

  • App.vue: The main component, serving as the root of our application. It will contain the overall layout and manage the board’s state.
  • KanbanBoard.vue: This component will render the Kanban board itself, including the columns and tasks.
  • KanbanColumn.vue: Represents a single column (e.g., ‘To Do’, ‘In Progress’, ‘Done’).
  • KanbanTask.vue: Represents an individual task within a column.

This structure promotes modularity and reusability, making our code easier to understand and maintain.

3. Creating the KanbanBoard Component (KanbanBoard.vue)

Let’s create the KanbanBoard.vue component. Inside the src/components directory, create a new file named KanbanBoard.vue. Add the following code:

<template>
 <div class="kanban-board">
 <div class="column" v-for="column in columns" :key="column.id">
 <h3>{{ column.title }}</h3>
 <div class="tasks">
 <kanban-task v-for="task in column.tasks" :key="task.id" :task="task"></kanban-task>
 </div>
 </div>
 </div>
</template>

<script>
 import KanbanTask from './KanbanTask.vue';

 export default {
 name: 'KanbanBoard',
 components: {
 KanbanTask
 },
 data() {
 return {
 columns: [
 { id: 1, title: 'To Do', tasks: [
 { id: 1, text: 'Learn Vue.js', status: 'To Do' },
 { id: 2, text: 'Build Kanban Board', status: 'To Do' }
 ] },
 { id: 2, title: 'In Progress', tasks: [] },
 { id: 3, title: 'Done', tasks: [] }
 ]
 }
 },
}
</script>

<style scoped>
 .kanban-board {
 display: flex;
 }

 .column {
 width: 300px;
 margin: 10px;
 padding: 10px;
 border: 1px solid #ccc;
 border-radius: 5px;
 }

 .tasks {
 min-height: 50px;
 }
</style>

Let’s break down what’s happening here:

  • Template: We use a v-for loop to iterate over the columns array in our data. Each column is rendered as a div with a heading (column title) and a container for tasks.
  • Components: We import the KanbanTask component and register it.
  • Data: The data() function defines the initial state of the board, including an array of columns. Each column has an id, title, and an array of tasks. The initial tasks are defined directly within the ‘To Do’ column.
  • Styling: Basic CSS is provided to give the board a basic structure and layout.

4. Creating the KanbanTask Component (KanbanTask.vue)

Now, let’s create the KanbanTask.vue component. Create a new file named KanbanTask.vue in the src/components directory:

<template>
 <div class="task">
 {{ task.text }}
 </div>
</template>

<script>
 export default {
 name: 'KanbanTask',
 props: {
 task: {
 type: Object,
 required: true
 }
 }
 }
</script>

<style scoped>
 .task {
 padding: 10px;
 margin-bottom: 5px;
 border: 1px solid #eee;
 border-radius: 3px;
 background-color: #f9f9f9;
 }
</style>

Explanation:

  • Template: Displays the task text using {{ task.text }}.
  • Props: Defines a task prop, which is an object. The required: true ensures that a task object is provided when the component is used.
  • Styling: Simple styling for the task element.

5. Integrating KanbanBoard into App.vue

Now, let’s integrate the KanbanBoard component into our main App.vue file. Open src/App.vue and modify it as follows:

<template>
 <div id="app">
 <kanban-board></kanban-board>
 </div>
</template>

<script>
 import KanbanBoard from './components/KanbanBoard.vue';

 export default {
 name: 'App',
 components: {
 KanbanBoard
 }
 }
</script>

<style>
 #app {
 font-family: Avenir, Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
 }
</style>

Here, we import the KanbanBoard component and register it. Then, we use it within the template.

6. Adding Drag and Drop Functionality (Optional, but highly recommended)

One of the core features of a Kanban board is the ability to drag and drop tasks between columns. Let’s add this functionality. We’ll use the vuedraggable library, a wrapper for the popular SortableJS library, which makes implementing drag-and-drop incredibly easy.

Install vuedraggable using npm:

npm install vuedraggable --save

Now, let’s modify the KanbanBoard.vue component to use vuedraggable:

<template>
 <div class="kanban-board">
 <div class="column" v-for="column in columns" :key="column.id">
 <h3>{{ column.title }}</h3>
 <draggable
 :list="column.tasks"
 group="kanban"
 @end="onDragEnd"
 class="tasks"
 >
 <kanban-task v-for="task in column.tasks" :key="task.id" :task="task"></kanban-task>
 </draggable>
 </div>
 </div>
</template>

<script>
 import KanbanTask from './KanbanTask.vue';
 import draggable from 'vuedraggable';

 export default {
 name: 'KanbanBoard',
 components: {
 KanbanTask,
 draggable
 },
 data() {
 return {
 columns: [
 { id: 1, title: 'To Do', tasks: [
 { id: 1, text: 'Learn Vue.js', status: 'To Do' },
 { id: 2, text: 'Build Kanban Board', status: 'To Do' }
 ] },
 { id: 2, title: 'In Progress', tasks: [] },
 { id: 3, title: 'Done', tasks: [] }
 ]
 }
 },
 methods: {
 onDragEnd(event) {
 // Find the column where the task was moved from and to
 const fromColumnIndex = this.columns.findIndex(column => column.tasks.some(task => task.id === event.moved.element.id));
 const toColumnIndex = this.columns.findIndex(column => column.id === event.to.parentNode.parentNode.dataset.columnId);

 // Update the task's status
 if (fromColumnIndex !== -1 && toColumnIndex !== -1) {
 const taskId = event.moved.element.id;
 const taskToMove = this.columns[fromColumnIndex].tasks.find(task => task.id === taskId);

 if (taskToMove) {
 taskToMove.status = this.columns[toColumnIndex].title;
 }
 }
 }
 }
}
</script>

<style scoped>
 .kanban-board {
 display: flex;
 }

 .column {
 width: 300px;
 margin: 10px;
 padding: 10px;
 border: 1px solid #ccc;
 border-radius: 5px;
 }

 .tasks {
 min-height: 50px;
 }
</style>

Key changes:

  • Import draggable: We import the vuedraggable component.
  • Use draggable component: We wrap the task list within the draggable component.
  • :list prop: We bind the list prop to column.tasks, which is the array of tasks for each column.
  • group prop: The group prop allows tasks to be dragged between columns. We set it to “kanban”.
  • @end event: We add an @end event listener, which fires when a drag operation ends.
  • onDragEnd method: This method is crucial. It updates the task’s status based on its new column.

To make the drag-and-drop work correctly, you’ll need to add a unique id to each task. Update the task data in KanbanBoard.vue to include an id property:

data() {
 return {
 columns: [
 { id: 1, title: 'To Do', tasks: [
 { id: 1, text: 'Learn Vue.js', status: 'To Do' },
 { id: 2, text: 'Build Kanban Board', status: 'To Do' }
 ] },
 { id: 2, title: 'In Progress', tasks: [] },
 { id: 3, title: 'Done', tasks: [] }
 ]
 }
 },

Additionally, you may need to modify the onDragEnd method to correctly identify the target column based on your specific implementation. The current method assumes the structure shown above.

7. Adding Task Creation Functionality (Advanced)

To make the Kanban board truly functional, you’ll likely want to add the ability to create new tasks. This involves adding a form to input task details and then adding the new task to the appropriate column. Implementing this feature would be a significant addition, involving:

  • A form component: Create a new component (e.g., TaskForm.vue) with input fields for task text, description, and potentially other attributes.
  • State management: You’ll need a way to manage the state of the form and the new task data.
  • Event handling: Implement an event handler (e.g., a button click) to submit the form.
  • Updating the board data: When the form is submitted, add the new task to the appropriate column in your columns data array.

This is a more advanced topic, and the exact implementation will vary based on your specific requirements. For this example, we will not cover it in detail, but you can explore this feature to enhance your Kanban board.

8. Adding Task Editing Functionality (Advanced)

Similar to adding task creation, task editing is another advanced feature that enhances the user experience. This involves:

  • A modal or inline editing component: Create a component or use an existing library to allow users to edit task details.
  • Event Handling: Implement event handlers for opening, saving, and canceling edit operations.
  • Data Updates: Update the task data in the columns array when the changes are saved.

This is another feature you can consider adding to expand the functionality of your Kanban board.

9. Styling and Enhancements

While the basic styling is provided, you can enhance the visual appeal of your Kanban board by:

  • Adding more CSS: Customize colors, fonts, and layouts to match your design preferences.
  • Using a CSS framework: Frameworks like Bootstrap, Tailwind CSS, or Vuetify can speed up styling.
  • Adding visual cues: Use colors, icons, or other visual elements to represent task priorities, deadlines, or other attributes.
  • Responsive design: Ensure the board looks good on different screen sizes.

Experiment with different styles to create a visually appealing and user-friendly Kanban board.

Common Mistakes and How to Fix Them

Here are some common mistakes beginners encounter and how to address them:

  • Incorrect Component Imports: Make sure you import components correctly using the correct relative paths. Double-check your file paths.
  • Data Binding Issues: Ensure you are using the correct syntax for data binding (e.g., {{ variable }} for displaying data and v-model for two-way binding in input fields).
  • Prop Errors: When using props, ensure you’ve defined them correctly in the child component and that you’re passing the correct data types.
  • Drag and Drop Issues: If drag and drop isn’t working, verify the following:
    • You’ve installed and imported vuedraggable correctly.
    • You’ve correctly bound the :list prop to the task array.
    • You’ve set the group prop to allow dragging between columns.
    • Your onDragEnd method correctly updates the task status.
  • State Management Complexity: As your application grows, consider using a state management library like Vuex or Pinia to manage your application’s state more effectively.

Summary / Key Takeaways

Building a Kanban board in Vue.js is an excellent project for learning and practicing fundamental web development concepts. You’ve learned how to structure a Vue.js application, create and use components, manage data, and implement basic drag-and-drop functionality. While this tutorial provides a basic foundation, you can extend your Kanban board with features like task creation, editing, and more advanced styling. Remember to break down complex tasks into smaller, manageable steps. Practice regularly, and don’t be afraid to experiment. By building your own Kanban board, you’ve gained valuable skills and a practical understanding of Vue.js, which you can apply to a wide range of web development projects. The ability to create custom, interactive components is a powerful asset in any developer’s toolkit, and this project serves as a great starting point for further exploration and learning.

The journey of building a Kanban board with Vue.js, like any software project, is a continuous learning process. With each feature added, each bug fixed, and each line of code written, you deepen your understanding of the framework and refine your problem-solving skills. Embrace the challenges, celebrate the successes, and remember that the most rewarding aspect of development is the ability to bring your ideas to life through code.

More posts