Create Vue.js micro app without NPM, using inline JS and HTML

It is possible to create Vue.js application using only inline JavaScript and HTML wihout bundling. It's easy to setup and blazingly fast to develop, very useful for small projects.

What is Vue.js?

To quickly recap what is Vue.js. It is a frontend JavaScript framework, main competitor of Angular and React. The architecture of Vue.js app is focused around components which contains both the view and logic layer. It offers simple tools and very easy templating syntax. You can become proficient in Vue.js in a matter of couple of hours. More advanced features like routing or state management are available through a set of oficially developed plugins.

Vue.js micro app with inline JS and HTML

What is it all about? As you may know, most of the resources for building Vue.js app are focusing around single file components. This is a powerful feature that allows to build composable applications. What those resources doesn't mention is that you can also create Vue.js micro applications, its the fastest way to enrich your website with complex features. For example I'm using Vue.js micro apps on my website where any interaction with the site is required (ex. newsletter). Let's start by looking at an example.

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>

  <body>
  </body>

</html>

We are starting with a blank HTML page but I already included Vue.js source file

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>

  <body>
    <div id="app"> </div>
  </body>
  <script type="text/x-template" id="form">
  </script>
  <script>
    var app = new Vue({
      el: '#app',
      template: '#form',
      data: function() {
        return {}
      }
    })

  </script>

</html>

Another step is to add a template container with <script> tag and our base Vue.js application

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>

  <body>
    <div id="app"> </div>
  </body>
  <script type="text/x-template" id="form">
    <div>
      <p>My name is: {{name}}</p><br/>
      <input type="text" placeholder="Type your name here" v-model="name"/>
    </div>
  </script>
  <script>
    var app = new Vue({
      el: '#app',
      template: '#form',
      data: function() {
        return {
          name: ''
        }
      }
    })

  </script>

</html>

Now that we have the Vue.js backbone ready, we can put our logic. I added an input field which value will immediately display as you type it. Often we will need to send or receive data from the API. Since Vue.js doesn't come with built in support for ajax requests we can XMLHttpRequest which is browser compatible.

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>

  <body>
    <div id="app"> </div>
  </body>
  <script type="text/x-template" id="form">
    <div>
      <p>My name is: {{name}}</p><br/>
      <input type="text" placeholder="Type your name here" v-model="name"/>
      <button @click="submit">Submit</button>
      <p v-if="result">The result is: {{result}} code</p>
    </div>
  </script>
  <script>
    var serialize = function(obj) {
      var str = [];
      for (var p in obj)
        if (obj.hasOwnProperty(p)) {
          str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
        }
      return str.join("&");
    }
    var POST = function(url, data, cb) {
      const Http = new XMLHttpRequest();
      Http.open("POST", url, true);
      Http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      Http.send(serialize(data));

      Http.onreadystatechange = (e) => {
        if (Http.readyState === 4) {
          cb(Http.status, Http.responseText)
        }
      }
    }
    var app = new Vue({
      el: '#app',
      template: '#form',
      data: function() {
        return {
          name: '',
          result: ''
        }
      },
      methods: {
        submit($event) {
          $event.preventDefault()
          let self = this;
          POST("/remote_api", {
            name
          }, (status, response) => {
            this.result = status
          })
        }
      }
    })

  </script>

</html>

That's it. As you can see, we've built a micro Vue.js app without any external packages, using only built in browser tools and core Vue.js library. I really like the concept of creating reactive components like this. Especially when our website is rendered on server side but we want to add a flavour of reactivity and real-time responsiveness to it.

Similar searches: vuejs inline js / vuejs micro app / vue js single page app / vuejs single file component