# Vue.js — The Progressive JavaScript Framework

> Vue.js is a progressive framework for building user interfaces. It features an approachable core with an incrementally adoptable ecosystem — from simple script includes to full-featured SPA development with Composition API, reactivity, and single-file components.

## Install

Save in your project root:

# Vue.js — The Progressive JavaScript Framework

## Quick Use
```bash
# Create a Vue project with Vite
npm create vue@latest my-app
cd my-app && npm install && npm run dev

# Or add Vue to any HTML page
# <script src="https://unpkg.com/vue@3"></script>
```

```vue
<!-- App.vue — Single File Component -->
<script setup lang="ts">
import { ref, computed } from "vue";

const count = ref(0);
const doubled = computed(() => count.value * 2);
</script>

<template>
  <button @click="count++">
    Count: {{ count }} (doubled: {{ doubled }})
  </button>
</template>

<style scoped>
button { padding: 0.5rem 1rem; }
</style>
```

## 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
```vue
<!-- 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
| Feature | Vue | React | Svelte | Angular |
|---|---|---|---|---|
| Type | Progressive Framework | Library | Compiler | Full Framework |
| Learning Curve | Low | Moderate | Very Low | High |
| Reactivity | Proxy-based | Hooks (manual) | Compiled | Zone.js + Signals |
| Template | HTML-based | JSX | HTML-based | HTML-based |
| CSS | Scoped SFC | External | Scoped SFC | Encapsulated |
| State Mgmt | Pinia (official) | Redux/Zustand | Built-in | RxJS/NgRx |
| Full-Stack | Nuxt | Next.js | SvelteKit | Angular Universal |

## 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

---
Source: https://tokrepo.com/en/workflows/6935d236-3702-11f1-9bc6-00163e2b0d79
Author: AI Open Source