We'll need the Vue CLI to get started. The CLI provides a means of rapidly scaffolding Single Page Applications and in no time you will have an app running with hot-reload, lint-on-save, and production-ready builds.

A lot of the decisons you have to make regarding how your app scales in future are taken care of. The Vue CLI comes with an array of templates that provide a self-sufficient, out-of-the-box ready to use package. The currently available templates are:

Simply put, the Vue CLI is your is the fastest way to get your apps up and running.

# install vue-cli
$ npminstall --global vue-cli

In this tutorial, we will be focusing on the use of single file components instead of instances. We'll also touch on how to use parent and child components and data exchange between them. Vue's learning curve is especially gentle when you use single file components. Additionally, they allow you to place everything regarding a component in one place. When you begin working on large applications, the ability to write reusable components will be a life saver.

You will be prompted to enter a project name, description, author and Vue build. We will not install Vue-router for our app. You will also be required to enable linting and testing options or the app.
You can follow my example below.

Once we have initialized our app, we will need to install the required dependencies.

# install dependencies and go!
$ cd todo-app
$ npminstall

To serve the app, run

$ npm run dev

This will immediately open your browser and direct you to http://localhost:8080 . The page will look as follows.

Free Node eBook

Build your first Node apps and learn server-side JavaScript.

📧

Thank you!

You have successfully joined the Scotchy super duper web dev awesome mailing list.

To style our application we will use Semantic. Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML. We will also use Sweetalert to prompt users to confirm actions. Sweetalert is a library that provides beautiful alternatives to the default JavaScript alert. Add the minified JavaScript and CSS scripts and links to your index.html file found at the root of your folder structure.

Every Vue app, needs to have a top level component that serves as the framework for the entire application. Fo our application, we will have a main component and nested within shall be a TodoList Component. Within this there will be todo sub-components.

Let's dive into building our application. First, we'll start with the main top level component. The Vue CLI already generates a main component that can be found in src/App.vue. We will build out the other necessary components.

A component file consists three parts; template, component class and styles sections.
The template area is the visual part of a component. Behaviour, events and data storage for the template are handled by the class. The style section serves to further improve the appearance of the template.

We will need to supply data to the main component that will be used to display the list of todos. Our todos will have three properties; The title, project and done(to indicate if the todo is complete or not). Components avail data to their respective templates using a data function. This function returns an object with the properties intended for the template. Let's add some data to our component.

We will need to pass data from the main component to the TodoList component. For this, we will use the v-bind directive. The directive takes an argument which is indicated by a colon after the directive name. Our argument will be todos which tells the v-bind directive to bind the element’s todos attribute to the value of the expression todos.

<todo-list v-bind:todos="todos"></todo-list>

The todos will now be available in the TodoList component as todos. We will have to modify our TodoList component to access this data. The TodoList component has to declare the properties it will accept when using it. We do this by adding a property to the component class.

Inside our TodoList template lets loop over the list of Todos and also show the the number of completed and uncompleted tasks. To render a list of items, we use the v-for directive. The syntax for doing this is represented as v-for="item in items" where items is the array with our data and item is a representation of the array element being iterated on.

In the TodoList component refactor the code to render the Todo component. We will also need to change the way our todos are passed to the Todo component. We can use the v-for attribute on any components we create just like we would in any other element. The syntax will be like this: <my-component v-for="item in items" :key="item.id"></my-component>. Note that from 2.2.0 and above, a key is required when using v-for with components. An important thing to note is that this does not automatically pass the data to the component since components have their own isolated scopes. To pass the data, we have to use props.

Let's add a property to the Todo component class called isEditing. This will be used to dertermine whether the Todo is in edit mode or not. We will have an event handler on the Edit span in the template. This will trigger the showForm method when it gets clicked. This will set the isEditing property to true. Before we take a look at that, we will add a form and set conditionals to show the todo or the edit form depending on whether isEditing property is true or false. Our template should now look like this.

Next, we'll add a method to the component class to handle the icon click. This method will emit an event delete-todo to the parent TodoList Component and pass the current Todo to delete. We will add an event listener to delete icon.

To create a new todo, we'll start by creating a new component CreateTodo in src/components. This will display a button with a plus sign that will turn into a form when clicked. It should look something like this.

Finally, we'll add a method completeTodo to the Todo Component that emits an event complete-todo to the parent component when the pending button is clicked and sets the done status of the todo to true.

We have learned how to initialize a Vue app using the Vue CLI. In addition, we learned about component structure, adding data to components, event listeners and event handlers. We saw how to create a todo, edit it and delete it. There is a lot more to learn. We used static data in our main component. The next step it to retrieve the data from a server and update it accordingly. We are now prepared to create interactive Vue application. Try something else on your own and see how it goes. Cheers!