Learn Vue - History, Background & Why You Need Vue

#Introduction

Before writing your first line of Vue code, it's important to understand where Vue comes from and what problem it solves. A framework isn't just a collection of APIs — it's an answer to a particular difficulty. Once you understand the problem, every design decision in Vue feels sensible, not just a rule to memorize.

Episode 1 tells the story of Vue's journey from a personal project to one of the most popular frontend frameworks in the world, dissects the progressive framework philosophy, and compares it with traditional approaches and React. This is an episode of story and context — not much code, but the understanding it produces will stay with you through the next 23 episodes.

#The Evolution and History of Vue

#Birth and Early Versions

Vue was first released by Evan You in 2014. At the time, Evan worked at Google and used Angular on various projects. He felt Angular was too heavy for certain needs, so he began writing a lighter, easier-to-adopt library — something that could take the best parts of Angular without forcing its entire ecosystem on you.

2014 -> Vue 1: reactive binding dan template dasar
2016 -> Vue 2: Virtual DOM, komponen, dan Vuex
2020 -> Vue 3: Composition API dan Proxy reactivity

Vue 2, released in 2016, became the tipping point for popularity thanks to its Virtual DOM, a mature component system, and Vuex for state management. The community grew quickly, and its comprehensive non-English documentation made Vue attractive to developers all over the world.

#Vue 3 and the Internal Revolution

Vue 3 was released in 2020 as a massive rewrite. The two most fundamental changes:

• Composition API: a new way to organize logic around functions, replacing the scattered option-based approach.
• Proxy-based reactivity: the reactivity system was rewritten using JavaScript Proxy so it can accurately track new property additions and property deletions.

Even though a lot changed, Vue 3 kept the template syntax and Options API so migrating from Vue 2 would feel familiar. This approach reflects Vue's core value: evolution without a complete overhaul.

#The Progressive Framework Approach

#Incremental Adoption

Vue's core philosophy is being a progressive framework — you don't have to decide everything up front. A plain web page can add one small Vue app for just a specific part, such as a form or counter component, without rewriting the entire site:

Vue inside a single HTML page

<div id="app">{{ message }}</div>
 
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script>
const { createApp } = Vue;
createApp({
  data() {
    return { message: "Halo Vue" };
  },
}).mount("#app");
</script>

The code above just needs to be loaded through a single script tag — Vue works directly on the existing page. createApp({...}).mount("#app") creates a Vue application and links it to a DOM element.

#From Widget to Full Application

Because adoption is incremental, you can stop at any level you need:

• Level 1: a few Vue apps on a static page for light interactivity.
• Level 2: a single-page application with Vue Router and Pinia.
• Level 3: a fullstack app with Nuxt for server-side rendering.

The higher you go, the more ecosystem tools you use, but all of them are optional. Vue never forces anything — that's what sets it apart from all-or-nothing frameworks.

#Problems Vue Solves

#Reactive UI Binding and Declarative Rendering

With vanilla JavaScript, changing data and then updating the DOM is manual work that's easy to get wrong:

The painful imperative pattern

const count = document.querySelector("#count");
let value = 0;
document.querySelector("#btn").addEventListener("click", () => {
  value = value + 1;
  count.textContent = value;
});

Here you control things step by step (imperatively): add a listener, read an element, rewrite the text. Vue replaces this with declarative rendering — you only describe the view, and Vue handles the synchronization:

Declarative rendering in Vue

<script setup>
import { ref } from "vue";
const value = ref(0);
</script>
 
<template>
  <p>{{ value }}</p>
  <button @click="value++">Tambah</button>
</template>

ref(0) creates reactive state, and when value changes, Vue automatically updates the parts of the template that depend on it. Notice: no querySelector, no textContent, no manual listeners.

#Simplifying State and Composition

The second problem Vue solves is state and logic complexity. In large applications, UI code quickly becomes a tangle of callbacks and global variables that are hard to track. Vue provides:

• Composables: logic that can be reused across components.
• Pinia: global stores with state, getters, and actions.
• Reactivity API: ref, reactive, computed, and watch that form a structured data layer.

The component-based approach gives every UI piece a clear boundary: props come in, events go out, and internal logic stays hidden. We'll build this up step by step starting in episode 5.

#Vue vs React vs Other Frameworks

#Fundamental Differences

React and Vue are both JavaScript-based component frameworks, but they differ in philosophy:

#When to Choose Vue

Vue is the best fit when you want an easy-to-read template syntax, a gentle learning curve, and the ability to adopt it incrementally in an existing project. React shines for the broadest ecosystem and full control through JSX. There's no wrong choice — both are world-class frameworks, and understanding both makes you a better frontend developer.

#Summary

Episode 1 gave you historical context and philosophy: Vue was born from the need for a lightweight, progressive framework, evolved from Vue 1 to Vue 3 with a major rewrite in 2020, and solves reactive binding and state complexity through declarative rendering and composition.

Key takeaways:

• Vue was created by Evan You in 2014 as a lighter, easier-to-adopt framework.
• Vue 3 introduced the Composition API and Proxy-based reactivity.
• Progressive framework philosophy: incremental adoption from widget to full application.
• Declarative rendering replaces manual DOM manipulation.
• Vue uses HTML templates; React uses JSX.
• There is no absolutely best framework — choose based on your team's and project's needs.

In the next episode 2, we'll dissect core concepts and main architecture — how the Proxy reactivity system works behind the scenes, the role of the Virtual DOM and template compilation, the component lifecycle, and the anatomy of a Single File Component with <script setup>, templates, and scoped styles. This is the technical foundation for all subsequent episodes.