Web Framework Deep Dive

Vue

The progressive framework — approachable like jQuery, scalable like Angular. Single-File Components, a gentle learning curve, and one of the most loved DX experiences on the web.

JavaScript / TypeScriptReactiveSFCApproachableCommunity-led
← Back to Client Side
Quick Facts

At a Glance

Created
2014 · Evan You
Style
Single-File Components (.vue)
Reactivity
Proxy-based, fine-grained
Latest
Vue 3.5 · Vapor mode (preview)
Notable users
GitLab, Alibaba, Nintendo, Trivago

Basic Concepts

  • Single-File Components (SFC): a .vue file bundles <template>, <script>, and <style> together.
  • Reactivity: ref() and reactive() wrap state; Vue tracks dependencies automatically.
  • Composition API (modern) replaces the older Options API for sharing logic via composables.
  • Directives like v-if, v-for, v-model handle rendering & binding.
  • Progressive: drop a <script> tag for sprinkles, or scale up to a full Nuxt app.
Syntax

Taste of Vue (Composition API)

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

const products = ref([]);
const loading  = ref(true);

onMounted(async () => {
  const res = await fetch('/api/products');
  products.value = await res.json();
  loading.value  = false;
});
</script>

<template>
  <p v-if="loading">Loading…</p>
  <ul v-else>
    <li v-for="p in products" :key="p.id">
      {{ p.name }} — \${{ p.price }}
    </li>
  </ul>
</template>
Mechanics

Key Features

Reactivity System

Vue 3 wraps state in JavaScript Proxies — when you read a property inside a render or computed, Vue tracks the dependency. Mutations trigger re-renders only where needed. Far simpler mental model than React's "re-run the whole function" approach.

Composition API & Composables

Reusable logic lives in composables — plain functions returning reactive state. Compose them into components like Lego blocks. The community has a vast library of vueuse utilities.

Directives & Templates

Templates feel like enhanced HTML — easy to read, easy for designers. v-model is two-way binding done right. Built-in directives cover most needs; custom directives are simple to write.

Vapor Mode

An upcoming compilation mode that ditches the virtual DOM in favor of fine-grained DOM updates — Svelte / Solid-style performance with Vue's familiar syntax.

Ecosystem
ToolPurpose
PiniaState management (replaces Vuex).
Vue RouterOfficial routing solution.
NuxtThe Vue meta-framework (SSR, SSG, file-based routing).
VueUse200+ composables for everyday tasks.
UI kitsVuetify, Quasar, PrimeVue, Element Plus.
TestVitest + Vue Test Utils.
Trade-offs

Strengths & Weaknesses

Strengths
  • Gentlest learning curve of the major frameworks.
  • Single-File Components are intuitive for designers & full-stack devs.
  • Reactivity model is simpler & more performant than React's.
  • Excellent docs & community.
Weaknesses
  • Smaller hiring pool than React in the West.
  • Two APIs (Options vs Composition) can confuse newcomers.
  • Less third-party tooling (esp. enterprise UI kits) than React/Angular.
  • Vue 2 → 3 migration was painful for some teams.
Where It Shines

Sweet Spots

Designer-Friendly Apps

Templates feel like real HTML — non-React-folk love it.

Progressive Enhancement

Drop into existing pages; scale up to full SPAs.

Asia-Pacific & OSS

Massive Vue adoption in China, Japan, Indonesia.

Full-stack via Nuxt

SSR, SSG, file-based routing, server routes — Vue's Next.js.

Continue

Other Web Frameworks