Building a Todo App with Vue.js [Part 1]

4 min readMar 10, 2019

This tutorial will give you a basic understanding of Vue.js. This guide is not intended to provide comparison with other frameworks and libraries.

Introduction

Vue.js is a progressive JavaScript framework that allows us to bypass some things that will be done the hard way in Vanilla.js. It being a progressive JavaScript framework means it adapts easily to the needs of the Developer. It is a component-based framework; which means, elements are defined in a component form or are grouped as components. With Vue, you only need a script tag to start with and all others can be added.

Enough of the talks! Let’s see how we can build with Vue.js and it’s integration. Mind you, this is Part One, so we won’t go that deep.

NB: You need an intermediate level of knowledge in HTML, CSS, and JavaScript. It uses a syntax called Template Syntax.

Example;

<div id=”app”>{{ data to be rendered}}</div>

Getting Started

There are a number of ways you can use Vue.js. The easiest way to use it is to use the JSFiddle Hello World example. You can also choose to create an HTML file and include Vue.

<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Or;

<script src=”https://cdn.jsdelivr.net/npm/vue"></script>

As a beginner, these are the recommended ways. Please do not use the Vue CLI. With the CLI, you must be a bit familiar with Node.js

Declarative Rendering

The core of Vue.js is to make it easy to interact with DOM. Let us see an example of this.

HTML FILE

<html>
 <body>
   <div id = “app”>
    {{ greeting }}
   </div><script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  <script>
   new Vue({
   el: ‘#app’,
   data: { greeting: ‘Good day’ }
   })
  </script>  </body>
</html>

Congrats! You’ve created your first Vue app!. This gives you “Good day” in your browser.

What this code means;

We instantiated a new Vue app and linked it to an element called with ID #app which is represented as the template. Then it matches that template to the data object in the script. The data object holds the data we want Vue to render or show in the browser.

In the template, the tag {{ }} indicates that there is some portion of the template that’s dynamic and the content will be searched in the Vue app data.

Using Vue CLI

NPM

When building large applications with Vue, it’s advisable to use npm(Node Package manager); which is a package manager for Node.js as the name implies. Let’s just say, it’s a repository of javascript libraries. This is because, it has the webpack module bundle and another useful one, which helps in large scale applications.

Installation

To install Vue, run this command to install it globally using npm; npm install -g @vue/cli Or Using Yarn, run this; yarn global add @vue/cli

Using yarn, this is how the installation should look:

Now that Vue is available to be used, let’s trying creating a project.

Create our Vue App

To create a project, run this;

vue create todo (“todo” is the name of the project). Doing this creates a folder on your PC with the name “todo”. The finished installation looks like this:

Creating a Vue project is very interactive. That is, it allows you to choose what you want in your project. So, you need to pick one preset from Babel and ESLint. These are the default from Vue.js.

Now that your project has been created, open your folder and run this command in your terminal be it in your code editor’s terminal or Git terminal to view your work. Yarn start/npm start. This builds your project up for you then gives you a port to run on (http://localhost:8080/).

Opening that in Your browser should look like this;

Congrats! You made your way through using Vue CLI to get your Vue project running. Now you can start writing some codes.

Do well to learn a lot more about how to edit your new project and writing some vue.js codes using their documentation.

See you in the next article. Make the best out of Vue.js!!