Vue

Progressive JavaScript framework for building UIs — approachable, flexible, and incrementally adoptable.

JavaScript free Open Source web since 2014

Vue’s single-file components and progressive adoption model make it a popular choice for teams wanting a gentler learning curve than React, with more structure than Svelte. The Composition API introduced in Vue 3 brings reactive primitives (ref, reactive, computed, watch) that compose cleanly into reusable logic, while <script setup> eliminates boilerplate. For full-stack Vue apps, Nuxt is the equivalent of Next.js.

Quick start

npm create vue@latest my-app
# Select: TypeScript? Yes, Vue Router? Yes, Pinia? Yes
cd my-app && npm install && npm run dev
<!-- src/components/Counter.vue -->
<script setup lang="ts">
import { ref, computed } from 'vue'

const count = ref(0)
const doubled = computed(() => count.value * 2)

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

<template>
  <div class="counter">
    <p>Count: {{ count }} (doubled: {{ doubled }})</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<style scoped>
.counter {
  padding: 1rem;
  border: 1px solid #ccc;
  border-radius: 8px;
}
</style>
<!-- Fetch data with Composition API -->
<script setup lang="ts">
import { ref, onMounted } from 'vue'

interface User { id: number; name: string }

const users = ref<User[]>([])

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

<template>
  <ul>
    <li v-for="user in users" :key="user.id">{{ user.name }}</li>
  </ul>
</template>

When to use

Vue is a strong choice when you want React-like component architecture with a gentler onboarding curve and more built-in conveniences. It’s particularly popular in Asia, in Laravel applications (via Inertia.js), and for teams migrating from jQuery who want a gradual path. For server-rendered Vue apps, Nuxt is the production standard.

// features

  • Single File Components (.vue) — template, script, and styles in one file
  • Composition API with `<script setup>` for clean, reusable logic
  • Reactive system — `ref()` and `reactive()` for fine-grained reactivity
  • Progressive adoption — drop a `<script>` tag or build a full SPA
  • Scoped CSS, CSS Modules, and CSS-in-JS all supported
  • Built-in transitions and animation system
  • Official ecosystem: Vue Router, Pinia (state), Vite (build tool)
  • TypeScript support built in — no extra config needed

// installation

npm npm create vue@latest my-app
pnpm pnpm create vue my-app
yarn yarn create vue my-app

// commonly used libraries

Promise-based HTTP client for the browser and Node.js — interceptors, automatic JSON …

http 2014 open source

Modern JavaScript date utility library — pure functions, immutable, tree-shakeable, and …

utility 2015 open source

Utility library delivering modularity, performance, and extras for working with arrays, …

utility 2012 open source

Powerful async state management for server data — caching, background refetching, pagination, …

http 2019 open source

// stacks using Vue

JAMstack

// tags

uifrontendspasfccomponentsprogressive
Something wrong? Edit this entry on GitHub.
✏ Edit on GitHub