June 10, 2026•Frontend

The same button component in 3 major versions of VueJS

Vue.js has come a long way since its initial release. From its humble beginnings as a lightweight library inspired by Angular and React, it has grown into one of the most beloved frontend frameworks. In this post, I'll look at three major milestones: Vue 1.x (the original), Vue 2.x (the Options API era that powered massive adoption), and Vue 3.x (the modern Composition API default). I'll implement the same simple feature: a button that shows an alert when clicked.

Vue 1.x: The Dawn of Reactive Components (circa 2015)

Vue 1 introduced the core concepts that made it stand out: reactive data binding, a simple template syntax, and component-based architecture using Vue.extend() and global registration.

Key characteristics of this era:

Heavy use of Vue.extend() for component definitions.
Templates were often strings or in the DOM.
Event handling with v-on (shorthand @ came later but was similar).
Data was defined directly, with caveats around sharing objects.

Example: AlertButton.vue (Vue 1 style)

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/vue@1.0.28/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <alert-button></alert-button>
    </div>

    <script>
      var AlertButton = Vue.extend({
        template: '<button v-on:click="showAlert">Click me (Vue 1)</button>',
        methods: {
          showAlert: function() {
            alert('Hello from Vue 1.x!');
          }
        }
      });

      Vue.component('alert-button', AlertButton);

      new Vue({
        el: '#app'
      });
    </script>
  </body>
</html>