🟢 Vue.js Framework Architecture

What Is Vue.js?

Vue.js (pronounced "view") is a JavaScript framework for building user interfaces. Its defining trait is being progressive: you can drop it into one corner of a legacy page with a single <script> tag, or use its full toolchain to build a large single-page application. You adopt exactly as much of Vue as the job needs — nothing more.

💡 An analogy: If frameworks were vehicles, Vue would be a modular electric car. You start with a basic model that just drives, then add features — routing, state management, server-side rendering — as your needs grow, without ever swapping the whole vehicle.

What draws developers to Vue:

• Approachable — if you know HTML, CSS, and JavaScript, you can be productive in an afternoon.
• Progressive — scales smoothly from a widget to a full app.
• Performant — a small runtime (~34 KB min+gzip in Vue 3) with an efficient rendering engine.
• Well-rounded — official, first-party libraries for routing (Vue Router) and state (Pinia) mean fewer decisions and less glue code.

A Short History of Vue

Vue was created by Evan You in 2014. Having worked with AngularJS at Google, he set out to keep the parts he loved — declarative templates and data binding — while shedding the weight. Knowing the versions helps you read documentation and Stack Overflow answers correctly:

Core Architecture

Under the surface, Vue is a small set of parts that hand work to each other. A template is compiled into a render function; the render function produces a lightweight tree; the reactivity system decides when that tree needs to be regenerated; and a diff step applies only the necessary changes to the real DOM.

Whole ecosystem sits on top of this small core:

The Reactivity System

Reactivity is the heart of Vue. It tracks which pieces of the UI depend on which pieces of data, then updates exactly those pieces when the data changes — so you never write manual DOM updates. In Vue 3 this is built on JavaScript Proxies, which intercept reads and writes on an object.

// A radically simplified sketch of Vue 3's reactivity
function reactive(target) {
  return new Proxy(target, {
    get(obj, key) {
      track(obj, key);      // remember: "this render used obj.key"
      return obj[key];
    },
    set(obj, key, value) {
      obj[key] = value;
      trigger(obj, key);    // re-run every render that used obj.key
      return true;
    }
  });
}

const state = reactive({ count: 0 });
state.count++;              // automatically re-renders anything that read count

💡 An analogy: Reactivity is like a smart home. You change the thermostat setting (data); sensors detect the change (dependency tracking) and the HVAC adjusts automatically (DOM update). You never walk around flipping switches by hand.

In real code you rarely call the internal reactive() directly for primitives — you use ref() for single values and reactive() for objects:

import { ref, reactive, computed } from 'vue';

const count = ref(0);                 // access/mutate via count.value
const user  = reactive({ name: 'Ana' });
const doubled = computed(() => count.value * 2); // cached, auto-updates

count.value++;        // doubled becomes 2, and the UI follows

Single-File Components & Lifecycle

Vue's signature format is the Single-File Component: a .vue file with three blocks — <template>, <script>, and <style>. Everything a component needs lives in one place, and <style scoped> keeps its CSS from leaking out.

<!-- Counter.vue -->
<template>
  <div class="counter">
    <h2>{{ title }}</h2>
    <p>Count: {{ count }}</p>
    <button @click="count++">Increment</button>
  </div>
</template>

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

defineProps({ title: { type: String, default: 'Counter' } });
const count = ref(0);
</script>

<style scoped>
.counter { border: 1px solid var(--border, #ccc); padding: 1rem; }
</style>

💡 An analogy: SFCs are prefabricated rooms. Each arrives complete with walls (structure), wiring (logic), and paint (styles), ready to snap together into a finished building (your app).

The component lifecycle

Every component moves through create → mount → update → unmount, and Vue gives you hooks to run code at each stage — fetch data when a component appears, clean up timers when it leaves.

import { onMounted, onUnmounted } from 'vue';

onMounted(() => {
  // DOM is ready — good place for fetches, chart libs, focus, etc.
  console.log('Component is on screen');
});

onUnmounted(() => {
  // Tear down timers, listeners, subscriptions here
  console.log('Component removed — clean up now');
});

Options API vs Composition API

Vue 3 gives you two ways to write a component's logic. Both are fully supported; they are different styles, not different frameworks.

Options API — organize by option type

Logic is grouped into named buckets: data, computed, methods, lifecycle hooks. It reads clearly for small components.

<script>
export default {
  name: 'UserProfile',
  data() {
    return { user: null, loading: false };
  },
  computed: {
    fullName() {
      return this.user ? `${this.user.firstName} ${this.user.lastName}` : '';
    }
  },
  methods: {
    async fetchUser(id) {
      this.loading = true;
      try {
        const res = await fetch(`/api/users/${id}`);
        this.user = await res.json();
      } finally {
        this.loading = false;
      }
    }
  },
  created() {
    this.fetchUser(this.$route.params.id);
  }
};
</script>

Composition API — organize by feature

With <script setup> you group all the code for one concern together, regardless of whether it is state, a computed value, or a lifecycle hook. This is the recommended style for new projects.

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRoute } from 'vue-router';

const user = ref(null);
const loading = ref(false);

const fullName = computed(() =>
  user.value ? `${user.value.firstName} ${user.value.lastName}` : ''
);

async function fetchUser(id) {
  loading.value = true;
  try {
    const res = await fetch(`/api/users/${id}`);
    user.value = await res.json();
  } finally {
    loading.value = false;
  }
}

const route = useRoute();
onMounted(() => fetchUser(route.params.id));
</script>

💡 An analogy: The Options API organizes a kitchen by type of item — all utensils in one drawer, all spices in one rack. The Composition API organizes by recipe — everything you need for one dish grouped together. As dishes get complicated, grouping by recipe wins.

Setting Up a Vue Project

For a quick demo you can load Vue from a CDN and skip any build step:

<div id="app">
  <h1>{{ message }}</h1>
  <button @click="count++">Count: {{ count }}</button>
</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 3!');
      const count = ref(0);
      return { message, count };
    }
  }).mount('#app');
</script>

For any real project, use Vite — the official, extremely fast build tool:

# Scaffold a new Vue 3 project
npm create vue@latest my-vue-app

# Choose the options you want (Router, Pinia, TypeScript…), then:
cd my-vue-app
npm install
npm run dev

A typical project structure:

my-vue-app/
├── public/            # static assets served as-is
├── src/
│   ├── assets/        # assets processed by the build
│   ├── components/    # your .vue components
│   ├── App.vue        # root component
│   └── main.js        # application entry point
├── index.html         # the single HTML page
├── package.json
└── vite.config.js

The entry point wires everything together. This is where you register plugins like the router and Pinia:

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import router from './router';
import App from './App.vue';

const app = createApp(App);
app.use(createPinia());   // state management
app.use(router);          // client-side routing
app.mount('#app');

Hands-on Exercise

<template>
  <div class="counter">
    <h2>{{ title }}</h2>
    <p>Count: {{ count }}</p>
    <p>The count is {{ evenOrOdd }}.</p>
    <button @click="count++">+</button>
    <button @click="decrement">-</button>
    <button @click="count = 0">Reset</button>
  </div>
</template>

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

defineProps({ title: { type: String, default: 'Vue Counter' } });

const count = ref(0);
const evenOrOdd = computed(() => (count.value % 2 === 0 ? 'even' : 'odd'));

function decrement() {
  if (count.value > 0) count.value--;
}
</script>

Best Practices

Summary & Quiz

📚 Further Reading

• Vue.js — Official Guide
• Reactivity in Depth
• Composition API FAQ
• Vite Documentation

🚀 What's Next?

Now that you understand Vue's architecture, the next lesson zooms into its most important building block: components and props — how to break a UI into reusable pieces and pass data between them.