💚 Vue.js Framework Overview

What Is Vue.js?

Vue.js (pronounced like "view") is an open-source JavaScript framework for building user interfaces and single-page applications. It was created by Evan You in 2014, after he worked with Angular at Google and wanted something lighter — keeping the parts he loved while shedding the ceremony.

"I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight."
— Evan You, creator of Vue.js

At its heart, Vue does one job extraordinarily well: it keeps what the user sees on screen in sync with your application's data. You describe what the UI should look like for a given state, change the state, and Vue efficiently updates the DOM for you. You never hand-write document.querySelector(...) plumbing again.

The "Progressive" Idea

Vue calls itself a progressive framework. That phrase is the key to understanding it. Unlike a monolithic framework that demands you commit to its whole world on day one, Vue is designed to be adopted incrementally. You can start small and scale up only as your needs grow.

• Drop-in enhancement — add a single <script> tag to sprinkle interactivity onto one section of an existing server-rendered page.
• Single-page application — add Vue Router and build a full client-side app with multiple views.
• Full-stack framework — reach for Nuxt when you need server-side rendering, file-based routing, and SEO.

💡 Analogy: Vue is like a modular kitchen. You can buy just the mixing bowl today, add the stand mixer next month, and eventually build out the whole professional kitchen — without ever throwing away what you started with.

This is why Vue feels approachable: you never have to learn everything at once. Its core philosophy pulls in the same direction — approachable, versatile, performant, and maintainable.

How Vue Works Inside

You don't need to memorize Vue's internals to use it, but a mental picture of the pipeline makes everything that follows click into place. When your data changes, a chain of systems cooperates to update the screen with the minimum necessary work.

The reactivity system

Vue 3 wraps your state in JavaScript Proxies. When a component reads a piece of data during rendering, Vue quietly records that dependency. When that data later changes, Vue knows exactly which components need to re-render — and leaves everything else untouched.

💧 Analogy: Think of a smart irrigation system that senses which specific plants are dry and waters only those beds, instead of soaking the whole garden every time.

The component system

Vue apps are trees of components. Each component owns its own markup, behavior, and styling, and can be composed with others like building blocks.

🧱 Analogy: Components are LEGO bricks — standardized, reusable pieces you snap together to build something far bigger than any single brick.

The Virtual DOM

Rather than rewriting the whole page on every change, Vue keeps a lightweight in-memory copy of the DOM. When state changes, it builds a new virtual tree, diffs it against the old one, and applies only the differences to the real DOM.

📐 Analogy: An architect doesn't demolish and rebuild a house for a small remodel. They compare the existing structure to the new blueprint and change only the rooms that differ.

The Single-File Component

The signature way to write Vue is the Single-File Component (SFC): a .vue file that keeps a component's template, logic, and styles together in one place. Modern Vue 3 uses the Composition API with <script setup>, which is the concise, recommended style you'll use throughout this module.

<script setup>
import { ref, computed } from 'vue'

// `ref` creates a reactive value
const count = ref(0)

// a computed value updates automatically when `count` changes
const doubled = computed(() => count.value * 2)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">Clicked {{ count }} times</button>
  <p>Doubled: {{ doubled }}</p>
</template>

<style scoped>
button {
  font-size: 1rem;
  padding: 0.5rem 1rem;
}
</style>

Three blocks, one file:

• <script setup> — the component's reactive state and behavior. Anything declared here is available to the template automatically.
• <template> — HTML enhanced with Vue's binding syntax ({{ }}, @click, and more).
• <style scoped> — CSS that applies only to this component, thanks to the scoped attribute.

Vue vs React vs Angular

All three are excellent, production-proven tools that solve the same core problem. Choosing between them is more about team, ecosystem, and taste than about capability. Here's an honest side-by-side.

The Vue Ecosystem

Vue's core stays small on purpose. Around it sits a set of officially maintained libraries that you add when a project needs them.

Vue is trusted in production by companies across many industries — Alibaba and Nintendo in e-commerce, GitLab and Adobe in enterprise tooling, and countless dashboards and internal tools where a gentle learning curve helps teams move fast.

Getting Started

There are two realistic ways to begin, depending on your goal.

Option A — quick experiment via CDN

Perfect for a throwaway prototype or enhancing a plain HTML page. No build step required:

<div id="app">{{ message }}</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return { message }
    }
  }).mount('#app')
</script>

Option B — a real project with Vite (recommended)

For anything you intend to keep, scaffold a proper project. The official create-vue tool sets up Vite, optional TypeScript, Vue Router, and Pinia for you:

npm create vue@latest my-app
cd my-app
npm install
npm run dev

  VITE v5.x  ready in 312 ms

  ➜  Local:   http://localhost:5173/
  ➜  press h + enter to show help

Open that URL and you have a live, hot-reloading Vue 3 app. Every change you save appears in the browser almost instantly.

Hands-on Exercise

<script setup>
import { ref } from 'vue'

const name = ref('Ray')
const showMessage = ref(false)
</script>

<template>
  <h1>Hello, {{ name }}!</h1>
  <button @click="showMessage = !showMessage">
    Toggle message
  </button>
  <p v-if="showMessage">You just used your first Vue directive.</p>
</template>

Best Practices

Summary & Quiz

📚 Further Reading

• Vue.js — Official Introduction
• Vue.js — Tooling & Vite
• Composition API FAQ

🚀 What's Next?

Next we'll open the hood and work directly with the pieces we glimpsed here — creating a Vue instance, wiring up reactive data, and applying the built-in directives that make templates come alive.