New post about the ESP8266 where we will see how to consume a Rest API with the Axios library, from a VueJs application served from the ESP8266.
In the previous post we left off seeing how to consume with an ESP8266 and the Axios library, using only Vanilla Javascript. On the other hand, we already saw how to serve a VueJs application in this post.
Today it’s time to take another small step and combine both components, Axios and VueJS, to make a Web application that communicates with the ESP8266 as a backend through a Rest API, using Axios.
Of course, if you haven’t seen the previous posts yet, it would be a good time to review them because we are going to build on what we saw.
Let’s get started! First, the backend in this example is identical to the previous post. That is, the code on the ESP8266 will not change.
So as not to be tedious and make the post unnecessarily long, we will omit it. You have it in the previous examples of the series and in the code on Github.
What will change, of course, is the frontend that we are going to serve from the SPIFFS, which now becomes.
Where we see that the code of our page has been adorned with the tags typical of a VueJs App.
<!DOCTYPE html>
<html>
<head>
<title>ESP8266 Vue + Axios</title>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<!-- Our simple example APP -->
<div id="app">
<div>
<button v-on:click="getAll()">GetAll</button>
</div>
<div>
<button v-on:click="get()">Get</button>
<input v-model="getId" placeholder="getId">
</div>
<div>
<button v-on:click="getFiltered()">Filter</button>
<input v-model="filter" placeholder="filter">
</div>
<div>
<button v-on:click="create()">Create</button>
</div>
<div>
<my-component v-for="item in items" v-bind:my="item" v-bind:key="item.id"></my-component>
</div>
</div>
<!-- From CDN -->
<!--<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>-->
<!--<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>-->
<script type="text/javascript" src="./vendor/vue.min.js"></script>
<script type="text/javascript" src="./vendor/axios.min.js"></script>
<!-- Load the files that simulate our API and our App in Vue.JS -->
<script type="text/javascript" src="./js/API.js"></script>
<script type="text/javascript" src="./js/app.js"></script>
</body>
</html>
The VueJS application is defined in the ‘app.js’ file. It is very simple, and basically exposes a collection of ‘items’ objects, and the necessary methods to call our example API.
Vue.component('my-component', {
props: ['my'],
template: '<div>{{my.text}}<button v-on:click="get(my.id)">Get</button><button v-on:click="update(my.id)">Update</button><button v-on:click="replac(my.id)">Replace</button><button v-on:click="delet(my.id)">Delete</button></div>',
methods: {
get: function (id) {
API_get(id);
},
update: function (id) {
API_update(id, 'NewItem');
},
replac: function (id) {
API_replace(id, 'NewItem');
},
delet: function (id) {
API_delete(id);
}
}
})
var app = new Vue({
el: '#app',
data: {
filter: "",
getId: "",
items: [
{ id: 0, text: 'Item1'},
{ id: 1, text: 'Item2' },
{ id: 2, text: 'Item3'}
]
},
methods: {
getAll() {
API_getAll();
},
get() {
API_get(this.$data.getId);
},
getFiltered() {
API_getFiltered(this.$data.filter);
},
create() {
API_create('NewItem');
},
}
})
The API, which in turn is defined in the ‘API.js’ file. These functions use Axios to make the calls to our Rest API, as we saw in the previous post.
function API_get(id) {
axios.get('item/' + id)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
});
}
function API_getFiltered(filter) {
axios.get('item', {
params: {
filter: filter
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
});
}
function API_getAll() {
axios.get('item')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
});
}
function API_create(data) {
axios.post('item', {
data: data
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
});
}
function API_replace(id, data) {
axios.put('item/ ' + id, {
data: data
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
});
}
function API_update(id, data) {
axios.patch('item/ ' + id, {
data: data
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
});
}
function API_delete(id) {
axios.delete('item/' + id)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
});
}
Result
We upload our new page to the SPIFFS memory, and when loading it in the browser we see the same page as before.
If we interact with the buttons, we check in the browser’s developer console that the actions are performed correctly.
As we can verify in the serial port terminal of the ESP8266 that, indeed, the actions and information are received correctly in the backend.
You might say. But it’s the same ugly page as the previous example! Well, no, we have taken another small step in integration to serve and interact with complex Apps from the ESP8266. Now we don’t use ‘bare’ Javascript, but we incorporate two powerful libraries like Axios and VueJS.
In the next post we will take another small step by integrating Vuetify, once again achieving a more modern Material Design look for our application. Until the next post!
Download the code
All the code from this post is available for download on GitHub. 
