Vue is a progressive JavaScript framework that focuses on building user interfaces. It focuses heavily on the ViewModel. To learn more, go over to the documentation to see things for yourself.

In this tutorial, you will get your hands dirty with Vue.js by building a simple blog. The blog will have a form that allows you create a post. However, the post that will be displayed on the blog will be retrieved from a resource available online. 

Sounds like fun? Let us get busy.

Getting Started

Start by running the command:

vue init webpack blogapp

Now migrate into the newly created folder and run the command to install your modules.

npm install

This will install all the modules listed in your package.json.

Now start up your dev server to see what you have. Simply run the command below.

npm run dev

Input Binding

First, create a new file called addBlog.vue in your src/components folder. This file you are creating is called a component.

Components are used to extend basic HTML elements to encapsulate reusable code. This component will handle the creation of new blog post. Here is how the file should look.

#src/components/addBlog.vue

<template>
    <div id="add-blog">
        <h2>Add a New Blog Post</h2>
        <form v-if="!submitted">
            <label>Blog Title:</label>
            <input type="text" v-model.lazy="blog.title" required />
            <label>Blog Content:</label>
            <textarea v-model.lazy.trim="blog.content"></textarea>
            <div id="checkboxes">
                <p>Blog Categories:</p>
                <label>Ninjas</label>
                <input type="checkbox" value="ninjas" v-model="blog.categories" />
                <label>Wizards</label>
                <input type="checkbox" value="wizards" v-model="blog.categories" />
                <label>Mario</label>
                <input type="checkbox" value="mario" v-model="blog.categories" />
                <label>Cheese</label>
                <input type="checkbox" value="cheese" v-model="blog.categories" />
            </div>
            <label>Author:</label>
            <select v-model="blog.author">
                <option v-for="author in authors">{{ author }}</option>
            </select>
            <button v-on:click.prevent="addPost">Add Blog</button>
        </form>
        <div v-if="submitted">
            <h3>Thanks for adding your post</h3>
        </div>
        <div id="preview">
            <h3>Preview blog</h3>
            <p>Blog title: {{ blog.title }}</p>
            <p>Blog content:</p>
            <p style="white-space: pre">{{ blog.content }}</p>
            <p>Blog Categories:</p>
            <ul>
                <li v-for="category in blog.categories">{{ category }}</li>
            </ul>
            <p>Author: {{ blog.author }}</p>
        </div>
    </div>
</template>

<script>
// Imports
export default {
  data () {
    return {
      blog: {
        title: '',
        content: '',
        categories: [],
        author: ''
      },
      authors: ['The Net Ninja', 'The Angular Avenger', 'The Vue Vindicator'],
      submitted: false
    }
  },
  methods: {
  }
}
</script>

<style>
#add-blog *{
    box-sizing: border-box;
}
#add-blog{
    margin: 20px auto;
    max-width: 500px;
}
label{
    display: block;
    margin: 20px 0 10px;
}
input[type="text"], textarea{
    display: block;
    width: 100%;
    padding: 8px;
}
#preview{
    padding: 10px 20px;
    border: 1px dotted #ccc;
    margin: 30px 0;
}
h3{
    margin-top: 10px;
}
#checkboxes input{
    display: inline-block;
    margin-right: 10px;
}
#checkboxes label{
    display: inline-block;
    margin-top: 0;
}
</style>

In the template section, you have two parts. The first is a form to create a new post, and the other gives a preview of what is entered in the form. With this, you can see the inputs you enter before saving the post. This is possible using a v-model, which is a directive that allows us to perform two-way data bindings on form inputs. It automatically updates the DOM based on the input entered. The data binding is also possible for select options and checkboxes, as you can see above.

A directive is a special token in the markup that tells the library to do something to a DOM element.

For instance, the line of code <input type="text" v-model.lazy="blog.title" required /> will bind the value entered into the field to be the value of blog.title. This value according to what you have above is outputted where you have <p>Blog title: {{ blog.title }}</p>.

v-for is used to loop through a collection. In the above, you use v-for to loop through a collection of authors and categories.

It is possible to make use of conditionals in Vue. You see that play out when you set the default value of submitted to false. The line <form v-if="!submitted"> tells Vue to display the form if the value of submitted is false. After making a post, it is important to change this to true, and this will be done in the function that gets called for the creation of new posts. After this happens, the form disappears, and the preview of your post with a div that contains an appreciation message is shown.

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

<template>
  <div id="show-blogs">
    <h1>All Blog Posts</h1>
    <div v-for="blog in blogs" class="single-blog">
      <h2>{{ blog.title }}</h2>
      <article>{{ blog.content }}</article>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      blogs: []
    }
  },
  methods: {

  },
  created () {
    this.$http.get('http://jsonplaceholder.typicode.com/posts').then((data) => {
      this.blogs = data.body.slice(0, 10)
    })
  }
}
</script>

<style>
#show-blogs{
    max-width: 800px;
    margin: 0px auto;
}
.single-blog{
    padding: 20px;
    margin: 20px 0;
    box-sizing: border-box;
    background: #eee;
}
</style>

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

<template>
  <nav>
    <ul>
      <li><router-link to="/">Blog</router-link></li>
      <li><router-link to="/add">Add new post</router-link></li>
    </ul>
  </nav>
</template>

<script>
export default {
}
</script>

<style scoped>
ul{
    list-style-type: none;
    text-align: center;
    margin: 0;
}
li{
    display: inline-block;
    margin: 0 10px;
}
a{
    color: #fff;
    text-decoration: none;
    padding: 6px 8px;
    border-radius: 10px;
}
nav{
    background: #444;
    padding: 14px 0;
    margin-bottom: 40px;
}
.router-link-active{
    background: #eee;
    color: #444;
}
</style>

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

<template>
  <div id="app">
    <app-header></app-header>
    <router-view></router-view>
  </div>
</template>

<script>
import header from './components/header'

export default {
  components: {
    'app-header': header
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

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.