What Is Vue.js?
Vue.js is an open-source JavaScript framework for building user interfaces and single-page applications, created by Evan You in 2014. Vue is often described as "progressive" because it is designed to be adopted incrementally: you can sprinkle Vue onto a single page of an existing server-rendered application, or you can use it as the foundation for a full single-page application with routing, centralized state management, and a build toolchain. At its core, Vue provides a declarative, component-based programming model that lets you describe your UI as a function of state, and Vue handles efficiently updating the DOM when that state changes.
Cricket analogy: Like a franchise that can add one net-bowling specialist to an existing squad or build an entire team from scratch, Vue lets you sprinkle it onto one page of an existing site or build a full single-page app, describing the scoreboard as a function of the match state.
Core Design Philosophy
Vue's central idea is declarative rendering: you write templates that describe what the DOM should look like given the current data, and Vue's reactivity system tracks which parts of the template depend on which pieces of data. When that data changes, Vue automatically re-renders only the affected parts of the DOM, using a virtual DOM diffing algorithm under the hood. This removes the need for manual DOM manipulation (querySelector, addEventListener, and so on) that was common in earlier libraries like jQuery, and it is the same fundamental idea that powers React and Angular, though each framework implements reactivity and rendering differently.
Cricket analogy: Vue's templates are like a scoreboard operator who only updates the total when a run is actually scored, using a diffing check against the previous total, rather than the old-school manual method of rubbing out and rewriting every number on the board by hand each ball.
Vue Compared to React and Angular
React uses JSX and a purely function-based component model with an immutable-update mental model driven by hooks; Angular is a full, opinionated platform with dependency injection, TypeScript-first development, and RxJS baked in. Vue sits between the two: it ships an HTML-based template syntax (though JSX is also supported), a built-in reactivity system based on JavaScript Proxies, and official first-party libraries for routing (Vue Router) and state management (Pinia), while remaining lighter-weight and less opinionated than Angular. Vue 3, the current major version, rewrote the reactivity system and introduced the Composition API, which brought Vue's code-organization story much closer to React hooks while keeping the traditional Options API available for simpler use cases.
Cricket analogy: React is like a franchise built entirely around one immutable batting order set before the match (hooks), Angular is like a full national board with strict selection rules and mandatory fitness tests (DI, TypeScript, RxJS) baked in, while Vue sits in between, offering an HTML-based scorecard template with Proxy-based live tracking, plus official tools like Vue Router and Pinia, lighter than the national board's bureaucracy.
<script setup>
import { ref } from 'vue'
// A minimal Vue 3 component demonstrating declarative rendering
const count = ref(0)
function increment() {
count.value++
}
</script>
<template>
<button @click="increment">
Clicked {{ count }} times
</button>
</template>Vue's reactivity system in Vue 3 is built on ES2015 Proxies, which allow Vue to intercept property access and mutation on objects directly. This is a significant upgrade over Vue 2's Object.defineProperty-based reactivity, which could not detect new property additions or array index assignments without workarounds.
Because Vue is progressive, it's tempting to think it can only be used for small enhancements. In practice, Vue powers large production applications (GitLab, Alibaba, Nintendo's storefronts) at the same scale as React or Angular — its progressive nature is about adoption flexibility, not a ceiling on capability.
- Vue.js is a progressive JavaScript framework created by Evan You, first released in 2014.
- "Progressive" means Vue can be adopted incrementally, from a single script tag to a full SPA toolchain.
- Vue's core strength is declarative rendering: templates describe UI as a function of state.
- Vue 3 uses Proxy-based reactivity, replacing the Object.defineProperty approach from Vue 2.
- Vue Router and Pinia are official, first-party libraries for routing and state management.
- Vue supports two API styles — Options API and Composition API — for organizing component logic.
Practice what you learned
1. Who created Vue.js?
2. What does it mean to call Vue a "progressive framework"?
3. What underlying JavaScript mechanism powers Vue 3's reactivity system?
4. Which pair of libraries are Vue's official first-party solutions for routing and state management?
5. Which two component API styles does Vue 3 support?
Was this page helpful?
You May Also Like
Creating a Vue Application
How to scaffold, structure, and bootstrap a Vue 3 project using create-vue and Vite, including the root app instance and mounting process.
The Composition API vs Options API
Compares Vue's two component authoring styles, explaining why the Composition API was introduced and when each approach makes sense in real projects.
reactive() and ref()
A deep dive into Vue 3's two core reactivity primitives — ref() for any value type and reactive() for objects — and when to use each.
Vue.js Quick Reference
A condensed cheat-sheet of core Vue 3 Composition API syntax, directives, and lifecycle hooks for quick lookup while coding, rather than deep conceptual explanation.
Related Reading
Related Study Notes in Web Development
Browse all study notesWebSockets Study Notes
Web Development · 30 topics
Web DevelopmentWebAssembly Study Notes
WebAssembly · 30 topics
Web DevelopmentgRPC Study Notes
Protocol Buffers · 30 topics
Web DevelopmentSpring Boot Study Notes
Java · 30 topics
Web DevelopmentFlask Study Notes
Python · 30 topics
Web DevelopmentDjango Study Notes
Python · 30 topics