📅 Sun, Apr 5, 2020 ⏲️ ~ 4 minutes

How to use VueJs with ESP8266 or ESP32

Back to the section on ESP8266 and ESP32, let’s see how to integrate the VueJS framework in a web client served from the ESP8266.

We will refer to the ESP8266, but the same code is compatible with the ESP32, adjusting the name of the libraries. At the end, you have the code for both the ESP8266 and the ESP32.

In the previous post, we saw a fairly complete example of how to set up a web interface to control inputs, outputs, and execute actions on the ESP8266.

We already mentioned that, so far, we have used vanilla Javascript, without any library, to perform all the actions on the client. Which, in general, is a very good habit and much better than using the old and obsolete jQuery (don’t let me catch you using it, okay?).

But modern programming tends to be declarative, rather than imperative. That is, to define associations between the UI and the program logic, instead of “go and do actions”. For that there are many frameworks, such as Angular or Vue.

In this post we are going to start with this declarative approach to client programming, using the VueJS framework. It is a very popular framework for web development, lightweight but powerful, and it fits perfectly on the ESP8266.

And we are going to start with a basic example, our VueJS “hello world” that we already saw in this post, but working from the ESP8266. That is, in this post we basically aim to get it up and running.

Relax, at this point it won’t be particularly difficult for you.

main.ino

Starting, our main program couldn’t be simpler.

#include <ESP8266WiFi.h>
#include <ESPAsyncWebServer.h>
#include <FS.h>

#include "config.h"  // Replace with your network data
#include "Server.hpp"
#include "ESP8266_Utils.hpp"

void setup(void)
{
  Serial.begin(115200);
  SPIFFS.begin();
  
  ConnectWiFi_STA();
  
  InitServer();
}

void loop(void)
{
}

Server.hpp

Our ‘Server.hpp’ file, also very simple.

AsyncWebServer server(80);

void InitServer()
{
  server.serveStatic("/", SPIFFS, "/").setDefaultFile("index.html");

  server.onNotFound([](AsyncWebServerRequest *request) {
    request->send(400, "text/plain", "Not found");
  });

  server.begin();
    Serial.println("HTTP server started");
}

On the client side,

index.html

The ‘index.html’ file contains the minimum necessary to ensure that our Vue App works. Just note that we include the VueJS library, either from the memory of the ESP866, or (the commented line) from CDN.

<!doctype html>
<html lang="">
 
<head>
  <title>ESP8266 VueJS</title>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
 
<body>
  <div id="app">
    <ol>
      <!-- We use the component defined in Vue.JS -->
      <todo-item v-for="item in myList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
    </ol>
  </div>
 
  <!-- From CDN -->
  <!--<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>-->
  <!-- From ESP8266 -->
  <script type="text/javascript" src="vendor/vue.min.js"></script>

  <!-- Load the file that contains our App in Vue.JS -->
  <script type="text/javascript" src="js/app.js"></script>
</body>
 
</html>

app.js

The ‘app.js’ file containing the mini application in VueJS, with a list of “pending tasks”.

// Component definition
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li> {{ todo.text }} \
            <input type="checkbox" id="checkbox" v-model="todo.value"> \
            <span v-if="todo.value">{{ todo.hidden }}</span> \
            </li>'
})
 
// Definition of our example app
var app = new Vue({
  el: '#app',
  data: {
    myList: [
      { id: 0, text: 'Item1', hidden: 'Hidden1' },
      { id: 1, text: 'Item2', hidden: 'Hidden2' },
      { id: 2, text: 'Item3', hidden: 'Hidden3' }
    ]
  }
})

Result

We upload everything to the ESP8266 and go to the web page. If everything has gone correctly, we will see a list of three “tasks”, with a checkbox. And if we click on the checkbox, the “hidden” field of the corresponding line will appear.

esp8266-vue-js-resultado

So far, so easy. We have simply loaded a VueJS “hello world” mini application and checked that, of course, it works without problems when served from the ESP8266.

Unfortunately, our page is ugly as sin again. But, this is where Vuetify comes into play, a framework that brings Material Design aesthetics to VueJS applications.

We will see Vuetify on the ESP8266 in the next post and, of course, in the next ones we will redo the web interface from the previous post to be declarative (in our case, a.k.a. VueJS) There’s plenty more to come! Until next time.

Result

Download the code