Vue.js — The Progressive JavaScript Framework

Introduction

Vue.js is a progressive JavaScript framework that makes building interactive UIs a delight. Created by Evan You (who also created Vite), Vue is designed to be incrementally adoptable — you can use it as a simple script tag enhancement or as a full-featured framework with routing, state management, and build tooling.

With over 210,000 combined GitHub stars (vue2 + vue3 core), Vue is the second most popular frontend framework after React. It is known for its gentle learning curve, excellent documentation, and elegant API design. Companies like Alibaba, GitLab, Nintendo, and BMW use Vue in production.

What Vue Does

Vue provides a reactivity system that tracks dependencies and efficiently updates the DOM when state changes. Its single-file components (.vue files) combine template, script, and styles in one file. The Composition API (Vue 3) enables flexible code organization with composables — reusable reactive logic extracted into functions.

Architecture Overview

[Vue Application]
        |
   [Single File Components (.vue)]
   <template> + <script setup> + <style scoped>
        |
   [Reactivity System]
   ref(), reactive(), computed()
   watch(), watchEffect()
   Proxy-based (Vue 3)
        |
+-------+-------+-------+
|       |       |       |
[Vue    [Pinia]  [Vue
Router]  State    DevTools]
Routing  Mgmt    Browser
Guards   Stores  extension
Lazy load Plugins Debug
        |
   [Vite Build]
   HMR, TypeScript, SSR
        |
   [Nuxt (Full-Stack)]
   SSR, API routes, modules

Self-Hosting & Configuration

<!-- UserDashboard.vue -->
<script setup lang="ts">
import { ref, onMounted } from "vue";

interface User {
  id: number;
  name: string;
  email: string;
}

const users = ref<User[]>([]);
const search = ref("");
const loading = ref(true);

const filteredUsers = computed(() =>
  users.value.filter(u =>
    u.name.toLowerCase().includes(search.value.toLowerCase())
  )
);

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

<template>
  <div>
    <input v-model="search" placeholder="Search users..." />
    <p v-if="loading">Loading...</p>
    <ul v-else>
      <li v-for="user in filteredUsers" :key="user.id">
        <strong>{{ user.name }}</strong> — {{ user.email }}
      </li>
    </ul>
  </div>
</template>

Key Features

• Composition API — flexible, composable logic with ref, reactive, computed
• Single File Components — template, script, and styles in one .vue file
• Reactivity System — Proxy-based fine-grained dependency tracking
• Scoped Styles — CSS scoped to components by default
• v-model — two-way data binding for forms
• Directives — v-if, v-for, v-bind, v-on, and custom directives
• Transition System — built-in transition and animation support
• TypeScript — first-class TS support with type inference

Comparison with Similar Tools

FAQ

Q: Vue 2 vs Vue 3 — should I migrate? A: Yes. Vue 2 reached end of life on December 31, 2023. Vue 3 with the Composition API is the present and future. Migration tools and guides are available.

Q: Vue vs React — which should I choose? A: Vue for faster onboarding, better built-in tooling, and a more cohesive ecosystem. React for the largest community, more job opportunities, and React Native for mobile. Both are excellent.

Q: What is the Composition API? A: The Composition API (ref, reactive, computed, watch) organizes component logic by feature instead of by option type. It enables extracting reusable logic into composable functions — similar to React hooks but with automatic dependency tracking.

Q: Do I need Nuxt to use Vue? A: No. Vue works great standalone with Vite for SPAs. Use Nuxt when you need SSR, file-based routing, auto-imports, or API routes.

Sources

• GitHub: https://github.com/vuejs/core
• Documentation: https://vuejs.org
• Created by Evan You
• License: MIT