How to use Vue.js, json-server and Axios

05 Mar 2019

If you've ever wondered how to use Axios, the lightweight HTTP library inside of your Vue.js applications, here's the guide for you! We'll start with a blank Vue.js application and add json-server for local data storage and axios for HTTP interaction.

New Vue.js application

Assuming you have Node.js installed, run the following inside of your terminal:

# Install the Vue CLI
$ npm install -g @vue/cli

# New Vue project
$ vue create hello-axios

> default configuration

# Change directory
$ cd vue-axios

# Open in edtor
$ code .

# Run application
$ npm run serve

We should now have a blank Vue.js project up and running on our screen.

Adding json-server

At this stage, we can add a local database with json-server. Inside of the main directory, create a new file called db.json with the following inputs:

{
  "todos": [
    {
      "id": 0,
      "name": "Go to the gym"
    },
    {
      "id": 1,
      "name": "Walk the dog"
    },
    {
      "id": 2,
      "name": "Get some pizza"
    }
  ]
}

This allows us to create a fairly standard Todo list. We can install and start json-server by running the following in our terminal:

# Install json-server globally
$ npm install json-server -g

# From within the working directory:
$ json-server db.json

  \{^_^}/ hi!

  Loading db.json
  Done

  Resources
  http://localhost:3000/todos

  Home
  http://localhost:3000

If we access http://localhost:3000/todos inside of the browser, we'll see a list of the todos inside of the database:

Getting HTTP data within our application

Next up, we'll need to access this data from within our Vue.js application. Let's do that by adding axios to our project:

# Install Axios
$ npm install axios

Simple as that! Now we can import axios into our component (or abstracted module in and use it within our application. Inside of App.vue, add the following:

<template>
  <div id="app">
    <h1>Todos</h1>
    <ul>
      <li v-for="todo of todos" :key="todo.id">
        {{todo.name}}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'app',
  data() {
    return {
      todos: []
    }
  },
  async created() {
    try {
      const res = await axios.get(`http://localhost:3000/todos`)

      this.todos = res.data;
    } catch(e) {
      console.error(e)
    }
  },
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #6c5ce7;
  margin-top: 60px;
}

li {
  list-style: none;
}

h1 {
  color: #a29bfe
}
</style>

The main functionality of our application lies inside of our created hook. We're using async and await syntax to get the result of axios.get(YOUR_URL). The data attribute of the response is attributed to our todos array, and thus, we can display the todos on screen.

Adding data using POST

Other HTTP verbs can be interfaced with just as easily using Axios. Let's look at an example where we add a new Todo to our list:

<template>
  <div id="app">
    <h1>Todos</h1>
    <input type="text" v-model="todoName" @keyup.enter="addTodo">
    <ul>
      <li v-for="todo of todos" :key="todo.id">
        {{todo.name}}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

const baseURL = "http://localhost:3000/todos"

export default {
  name: 'app',
  data() {
    return {
      todos: [],
      todoName: ''
    }
  },
  async created() {
    try {
      const res = await axios.get(baseURL)

      this.todos = res.data;
    } catch(e) {
      console.error(e)
    }
  },
  methods: {
    async addTodo() {
      const res = await axios.post(baseURL, { name: this.todoName })

      this.todos = [...this.todos, res.data]

      this.todoName = ''
    }
  }
}
</script>

We've added a new method named addTodo. This uses the same baseURL but also passes along a new object which contains the name of our new Todo. As we're using json-server, this handles the id property automatically for us so we don't need to add one here.

We're then setting the new todos to contain every todo element, and then adding the new Todo on the end. It's good practice here to get clear the text box so that the user can enter a new Todo without duplication. Here's the results:

We can confirm that this is kept inside of our database if we look at our db.json:

{
  "todos": [
    {
      "id": 0,
      "name": "Go to the gym"
    },
    {
      "id": 1,
      "name": "Walk the dog"
    },
    {
      "id": 2,
      "name": "Get some pizza"
    },
    {
      "name": "Buy some milk",
      "id": 3
    }
  ]
}

Tada! I hope you found this useful when looking to incorporate axios and json-server into your Vue projects.

Vue.js