Vue.js is an open-source model–view–viewmodel JavaScript framework for building user interfaces and single-page applications. It was created by Evan You, and is maintained by him and the rest of the active core team members coming from various companies such as Netlify and Netguru. (I just copied this from wikipedia)

In this article, I’ll go through creating a Todo application with 3 boards (Todo, Doing and Done).

Note2: I will also not go through too much details as to how or why things do other things. For that, you can probably read here https://vuejs.org

# Getting Started

I’m going to use the vue-cli to create the project. So let’s install that globally

Now that we’ve installed it, we can use it to set up the application. I’ll use its gui for this. It’s much cleaner than the command line program.

From here, first choose the location you want your project to be in and then click on Create a new project here

Input the project name and select a package manager.

You’re then asked to choose the features you want to have in your application.

Here’s my selection:

• Babel
• TypeScript
• Vuex
• Linter/Formater

After setting up the project, wait a little bit as vue tries to install all requirements.

# Introduction

This is how Vue has organized the files:

the main.ts file is our starting point. It creates a Vue instance, and feeds it the store from Vuex.

the App.vue is our main component. It holds the whole application inside it. Currently in the default code, it shows an img and the HelloWorld component.

As you see, to render the component, we have a template tag that includes everything we want to render. We also have the style tag to write our css classes.

The section inside the script tag, is where we write our javascript code. You can see that the App component, is written in class style. To define a class component, we use @Component to specify that this class is a component. You can read more about class Components here: https://class-component.vuejs.org

It also registers the HelloWorld component, because it uses it in its template. To be able to use a component in a template, the component must be registered.

For this example, we’re not going to use the HelloWorld component. So let’s remove that. In fact, let’s remove everything inside the main div tag. And also let’s remove the import for HelloWorld, its registers and its file.

# The code

So, let’s start writing our own code. Our application, consists of:

• 3 columns: Todo, Doing, Done
• The ability to drag the tasks and drop them in any of the columns, thus changing their status
• The ability to drag the tasks and drop them inside the tarsh can, thus deleting them

For this structure to work, i’m going to create three main components:

• A Home component which contains the main part of the application
• A Column component for each column
• A Card component for each task

I will add the title header, in our App.vue. So let’s first start with those:

App.vue:

## Home Component

Now let’s create our Home Component. As our Home component, is something like a page, i’m going to create it in different directory than components. in the src directory, create another directory and name it views. Then create a Home.vue file inside of it.

First, create the three main part:

And also let’s register this component in App.vue

App.vue:

Now let’s add the create form. It’s a simple form, containing only an input and a button. But, same as react, we will need states to handle the input. so first let’s set up our Home component with a set of methods:

and now the template:

You can see in the template, attributes such as v-bind:value or v-on:click, those will translate to value and onclick repsectively, with a slight different that the value of these attributes, are bound to our variables from the component. This is how Vue tells the template on how to look for the variables and the functions from the component. If we simply do value=taskInput, it won’t bind and would just put “taskInput” as the value.

It should now look something like this:

## Column Component

Now let’s create our Column Component. Inside the components directory, create a new file and name it Column.vue

Our column component recieves 3 props:

• A columnName (Todo, Doing or Done)
• An onChange function, for when the status of the task changes

Let’s get to it:

It’s pretty straight forward. Now let’s use this in our Home component:

first register the component:

And then let’s add it to our template:

Also add the onChange function to the methods:

We’ll get to it later.

The app should now look like this:

## Card

And now our final component, the Cards.

In the same directory, create a file named Card.vue Simply copy and paste the following inside it:

And in the Column.vu, first register it on your own and then add it to template as such:

You can see the v-for attribute. It’s a for loop, and it would render the Card inside that loop. the item of v-bind:item="item", comes from that for loop. The key is also just a key on the element to help the render.

Now save and go to the app. You can use the form to create a new task and make the application look like this:

# Dragging

Now that we have layed out the code structure, it’s time to add the dragging functionality. For this to work, i’m going to first explain another concept called Vuex.

## Vuex

It’s something like Redux in React. It uses a flux methodoly to work and needs the Vuex package. In the featuers we selected when creating the project, we selected the Vuex, so it mush have already create the store.

Checkout these two files:

• store/index.ts: It defines the store with:
• state: to hold our state
• mutations: to hold our mutation functions
• actions: something like dispatchers in redux. To call the mutation functions (Not going to use this now)
• modules: To split our store for different modules of the app (Not going to use this either)
• main.ts: It injects our store inside the Vue instance it creates

So let’s set up the store. We need one state only and that is draggedTask. It holds the name of the task being dragged.

## Set up dragging

Using Vuex will be just as easy as defining it. Let’s go to our Card component and make some changes: Add v-on:dragstart="drag" to the main div in the Card component. And then define the drag function:

Card.vue:

Go to the Column component and add the attributes for the drag to the cardContainer:

Column.vue:

and then define the methods:

You can see that it now fetches the task name from the store and sends it to the onChange function. We have already created this function. So now everything should be working now. Go and have a test. Create a task, and then drag it to another column. Just one things needs to be added to the onChange function, and that is to empty the draggedTask in the state, after it’s been dropped. So simply add store.commit("setDraggedTask", {taskName: ""}) after this.tasks[ind].status = column; in the Home component.

Now that we can drag the tasks, let’s create a delete function as well. How it would work is, we show an image of a trash can, whenever a task is being dragged. So let’s go to the Home component and add some stuff.

First add the trash can icon to the assets folder. You can use icon you like. Add it after the form element inside the Home component:

Home.vue:

just like v-for, the v-if attribute will add a condition in showing the element. And the condition here is showTrash, meaning that it will show the element, when the showTrash variable is true or has a value.

showTrash comes from a new concept called, computed Vue uses computed for variables that need computing everytime they’re being used. And since we want to check our state everytime to show the trash, we’re going to get it inside a computed method

Add computed at the same lever as data and methods inside the Home Component:

We also need to add the functions deleteTask and allowDrop to our methods:

You can see that we fetch the name of the task from our store, and then empty the state.

The app is now complete and can easily drag the task from column to column, and also delete them by dropping them inside the trash can.

# One last touch

Now that the app is complete, simply for the matter of usability, let’s add the tasks as cookies in the browsers.

To do this, we’re going to need a new package called vue-cookies

Then add saveTasks to deleteTask, onChange and onCreate functions.