Vue.js Crash Course: Create a Simple Blog Using Vue.js

In the script section, you create a blog object with some properties. These properties store the values entered in our form. The data binding will not be possible without the registration of the properties in our Vue instance.

HTTP Request

Your blog needs to have a database where posts will be saved, but that is outside the scope of this tutorial. You will learn how to work with Vue.js and Firebase in an upcoming tutorial. For this, you will make use of a service that allows you to make HTTP GET and POST requests, and the service is called JSONPlaceholder. You will see how we use it in this post shortly.

There are different ways to make an HTTP request in Vue.js. One way is to use vue-resource, and this is what you will use for this tutorial.

To install it, run the command below:

npm install vue-resource --save 

You will need to import vue-resource and tell Vue that you want to make use of it. To do that, open src/main.js and drop in the code below.

#src/main.js

...

import VueResource from 'vue-resource'

Vue.use(VueResource)

...

Now you need to implement the function you added to the button of the form. This function will be used to create the new post. In the script section, add the block of code inside the method block.

#src/components/addBlog.vue

...

methods: {
    addPost: function () {
      this.$http.post('http://jsonplaceholder.typicode.com/posts', {
        title: this.blog.title,
        body: this.blog.content,
        userId: 1
      }).then(function(data){
        console.log(data)
        this.submitted = true
      })
    }
  }

...

Here you are making a POST request to http://jsonplaceholder.typicode.com/posts, and you pass an object that contains the values of the new post you are about to create. The value of submitted is set to true. When the button to add a new post is clicked, the page is automatically updated to show your appreciation message and the preview of the post.

Create the Second Component

In your blog, you will possibly want to have a page that lists all the posts available on your blog. Just the title of each post will do.

To do this, you will need to create a new component in the same directory where you created the component that enables you to create a new post. Here is how it should look.

#src/components/showBlog.vue

In the above, you loop through your blog collection and display the title and content of each article.

In the script section, you are sending an HTTP GET request to the resource specified. The posts are returned and set as blogs. However you do not want to display all posts on your page, so splice is used to show just 10 posts.

Hook Up the Routes

Now you can set up your routes. Create a header component; this component will house your navigation links.

#src/components/header.vue

This does not do much; it simply holds your link and makes use of VueRouter. For the links to work, you need to add them to your routes file, like this.

#src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import addBlog from '../components/addBlog'
import showBlogs from '../components/showBlogs'

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/add', component: addBlog },
    { path: '/', component: showBlogs }
  ]
})

Here you simply import your components and set the path with which they can be accessed.

Having done all that, clean up your App component to look like this.

#src/components/App.vue

You are only importing the header component you just created, and outputting it in your template. In order to display a component, you must register it, and this is what you do in the component block of your script section.

Now your blog is all good for testing, so start up your dev server.

npm run dev

Conclusion

This is just a crash course to try your hand at Vue.js. You got your hands dirty by creating custom components. You made use of vue-resource to send HTTP requests. With the new knowledge, you can go ahead and try to build something simple like a note application with preview capabilities.

JavaScript has become one of the de facto languages of working on the web. It’s not without its learning curves, and there are plenty of frameworks and libraries to keep you busy, as well. If you’re looking for additional resources to study or to use in your work, check out what we have available in the Envato marketplace.

In future tutorials, we will dive deep into the various parts of Vue.js. See you some other time.