Up & Running with Vue.js 2.0 by creating a simple blog application

Vue.js is a javascript framework used for building user interfaces, Can be used for creating powerful single page applications if used with supporting libraries.

In this quick introduction, we will be creating simple blog application, while covering major Vue.js topics. So, let’s get started.

Installation

We can download the vue.js script file or use the CDN version and include it in the script tag in the HTML. As of writing, the current version is 2.1.10

There is another way that I recommend for installing Vue.js is using Vue-cli. This is a simple command line interface for scaffolding Vue.js project.

First, run the following command from the command line npm install -g vue-cli, -g flag will make sure that the vue-cli will be installed globally on the system.

The next step is to create the new project using the webpack template And let’s give the app a name blogapp ue init webpack blogapp

 

Now we need to install the dependencies using npm install  and then run the application using npm run dev . This will start the local web server on port 8080 (or other open port) and the link will open in the default browser.

The starting page of the application will look like the following

 

Let’s look at the code

The one folder that we’ll be focusing on is the src folder, where all the application specific code resides. In the following screenshot you can see, main.js is the file where we’re importing Vue and also we’re importing the app component from App.vue. In the main js we have a Vue instance  new Vue({.....

  • el is the element with the id of app (#app), that we are attaching the Vue instance to
  • template here is the app component that we’re importing
  • And then we need to list the components available

All the Vue components files have .vue extension. A simple Vue component consists of three parts (template, script, style). In the App.vue we’re importing and using the hello component as  <hello></hello>


Adding Custom Component

Let’s create a new file under components->Blog.vue, and add the following code,

I have just copied the code from the Hello.vue and removed the bits that we don’t need. Here, we’re binding the title property in the template as {{title}}, so in place for the title, we’ll see Blog App.

Now we need to add that component in the App.vue

Now the output will look like this,

Congratulations, you have created your first custom Vue component.

Directives (Show All Posts)

Let’s add some blog posts data. Open Blog.vue and update the data () function as follows:

Here, we have added a posts property that currently holds three posts, each post has four properties namely userId, id, title, body.

Let’s try to show these posts as list that we can view, for this we can use a vue.js directive called v-for

Now the output will look like,

Here you can see, we’re showing the title from the posts data that we added.

Now let’s make it little bit cleaner by adding bootstrap. Include the bootstrap css in the head section of index.html  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Now update the template section in the Blog.vue as follows,

Now the output looks like,

If you’re wondering about the Vue logo at the top, I have removed it from the App.vue  <img src="./assets/logo.png"> 

Filters

Let’s see how we can make the blog post title uppercase, irrespective of its current case. For this, we can create a filter that does just that. Creating filters in Vue is very easy. We can add a filter in main.js, then we can access that filter globally anywhere in the app.

Now to use that filter, we can use the Pipe | symbol, Open Blog.vue and update the template as follows:

Now, the output will look like,

Events (Delete Post)

In this section, we’ll try to add the delete post functionality. When the user clicks on delete button, the post will be deleted from the view. As we are not persisting data, so data will again come back when we refresh the page.

We can attach any javascript event on an element using  v-on: followed by name of the event. e.g. v-on:click="function()"

Let’s update Blog.vue template as follows

We can now add deletePost(post) method in the methods property in the Vue instance,

Now when the user clicks on delete post on a certain post, the post will get deleted.

Add New Post

In this section, we’ll try to implement Add New Post functionality. We’ll use a bootstrap modal for this. When user clicks on a new post button, we’ll open a bootstrap modal which will have a form in which we can enter title and body of the post and click Add button.

Let’s update Blog.vue with the following code,

Also, let’s add AddPost method in the Vue instance,

We also need to include jQuery & bootstrap.js in the index.html head section

The output will look like,

 

vue-resource

We can use vue-resource for sending ajax request to external server. Here we’ll try to fetch the blog posts from (https://jsonplaceholder.typicode.com/posts).

First, we need to install the vue-resource using  npm install vue-resource --save

Now update the main.js file,

Vuejs provides various lifecycle hooks, we can use the created lifecycle hook. It is called after the instance is created. We can update the Vue instance in Blog.vue as follows,

Now we’re using the data from the server, the output in the browser will look like,

I have removed the body below the title intentionally, we’ll use in the blog-detail page.

vue-router

In a single page application, we navigate to different routes without refreshing the browser. Vue-router allows us to do that very easily.

First, we need to install the vue-resource using  npm install vue-router --save

Now Update the main.js file as follows,

Here, we’re importing vue-router similar to we did with vue-resource. Next, we have created a constant for defining our app routes. Then we have a VueRouter instance.

In the template, we’re using  <router-view></router-view> directive, this section will update when we browse to different views. Also, we’re using  <router-link to="/">Nav-Item</router-link> directive to link to different views in the app.

Now the app will look like,

Wrapping Up

Hope, This will help you get started with Vue. If there are any doubts, you can ask in the comments section below.

Thanks.

Please Consider Donating (Click Here)