Create A Basic Todo List Application With The Vue.js Framework
November 24, 2017
Nic Raboy
Web Development
When getting started with a new development technology or framework, a basic todo list style application is often in the examples used for learning. It makes a great example because todo lists often make use of a variety of things such as forms, loops, and other binding events, all while remaining short and easy.
We’re going to see how to create a very basic todo list that demonstrates components, form binding, loops, and click events, using the Vue.js JavaScript framework.
We’re going to be creating a single page application (SPA) for the web with Vue.js. It will include Bootstrap and a basic form and list that looks like the following:
This example can easily be extended to get list information from a web service or to include the form on a different screen within the application.
Create a New Vue.js Project with the Vue CLI
While not absolutely necessary, this project, like all all Vue.js projects, will be easier to create and maintain via the Vue CLI. Assuming the CLI is already installed, execute the following command:
vue init webpack todo-project
When answering the questions of the CLI, nothing is required. In fact, just say no to everything including the router. This will give us a very basic project.
Include Bootstrap as a UI Theming Framework
In an effort to have at least a semi-attractive web application, we’re going to include Bootstrap into our project.
Open the project’s index.html file and include the following HTML markup:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>todo-project</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
We’ve included the Bootstrap CSS and JavaScript files as outlined in the official Bootstrap documentation.
Develop the Application Logic for Maintaining the Todo List
Going forward, we’re going to be spending all our time in the project’s src/components/HelloWorld.vue file. If you’ve decided to rename the file to something more realistic, that is fine.
We’ll be depending on the theming that Bootstrap offers so we won’t be worrying about the <style> tags found in this file. Instead we are going to design our UI in the <template> block and our logic in the <script> block.
Within our component, include the following:
<script>
export default {
name: "Todo",
data () {
return {
todos: [],
input: ""
}
},
methods: {
add() {
this.todos.push(this.input);
this.input = "";
}
}
}
</script>
In the above snippet we’re initializing two local variables as part of our data. We’re initializing todos which will represent each of our list items and input which will be bound to our form and represent a single list item.
Within the methods section, we have a single add method. In this method we push the current input into our list and clear it. Because it will be bound to our form, clearing the variable will clear it from our form.
Next we have our HTML markup. Within our component, add the following:
<template>
<div>
<div class="row">
<div class="col-md-12">
<div class="well">
<h2>Create a New Todo</h2>
<form>
<div class="form-group">
<label for="todoitem">Todo Item</label>
<input type="text" v-model="input" class="form-control" id="todoitem" placeholder="Todo Item" />
</div>
<button type="button" v-on:click="add()" class="btn btn-default">Create</button>
</form>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2>List</h2>
<ul class="list-group">
<li v-for="(todo, index) in todos" :key="index" class="list-group-item">
{{ index }}: {{ todo }}
</li>
</ul>
</div>
</div>
</div>
</template>
Ignoring all the Bootstrap attributes and styling, we have an <input> with a v-model attribute that binds the input variable between our logic and UI. We also have a <button> with a click event that maps to our add method via the v-on:click attribute.
Remember, each of our todo items are kept in the todos array.
<ul class="list-group">
<li v-for="(todo, index) in todos" :key="index" class="list-group-item">
{{ index }}: {{ todo }}
</li>
</ul>
Using the v-for attribute we can loop through the array. Because we are working with an array rather than a JavaScript object, the key in our loop will represent the index. Each item in the list will be rendered to the screen.
Not so difficult, right?
Conclusion
You just saw how to create a very basic todo list single page web application using the very popular, Vue.js JavaScript framework. If you wanted to, you could take the information shared in, Consume Remote API Data via HTTP in a Vue.js Web Application, to send the form data to a remote todo list web service and display the server side list content on the screen.
Being able to bind form data and make use of click events and lists is essential in any web application. These are all demonstrated in a typical todo list application.
Nic Raboy
Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.
Follow Us
Support This Site
If you found this developer resource helpful, please consider supporting it through the following options:
