
How to use Vue.js, json-server and Axios
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.