Vue
An approachable, progressive framework for building UIs.
Vue is a progressive framework — you can drop it into a page for light interactivity or use it as the foundation of a full single-page application. It uses an HTML-based template syntax (closer to plain HTML than JSX) alongside a reactivity system that automatically tracks and updates the DOM when data changes, and it ships routing and state management as official, first-party libraries rather than leaving that entirely to the ecosystem.
When to use it
- You want templates that read close to plain HTML, which can lower the ramp-up cost for new team members
- You want official, first-party routing (Vue Router) and state management (Pinia) rather than picking from many competing options
- You're building with Nuxt and want SSR/SSG without leaving the Vue ecosystem
- Your team is coming from a more traditional templating background (PHP, Rails-style views)
Considerations
- Smaller job market and ecosystem than React, though this varies significantly by region and company
- Some advanced patterns (render functions, complex composables) still require learning JSX-adjacent concepts
- Vue 2 to Vue 3's Composition API was a meaningful shift — older tutorials and libraries may target the old Options API
Key concepts
Single-File Components
A .vue file combines a component's template, script, and scoped styles in one place.
Reactivity
Data declared with ref()/reactive() is tracked automatically — changing it re-renders whatever depends on it, no manual diffing needed by the developer.
Composition API
Logic is organized into composable functions (use* functions) that can be shared across components, similar in spirit to React hooks.
Directives
Template attributes like v-if, v-for, and v-model bind logic directly into HTML-like markup.
Getting started
npm create vue@latestScaffold a new Vue project with the official CLI (prompts for TypeScript, router, Pinia, etc.).
cd my-app && npm install && npm run devInstall dependencies and start the dev server.
Common mistakes
- Mixing Options API and Composition API patterns in the same codebase without a clear convention — makes the code harder for a team to read consistently.
- Destructuring a reactive object's properties directly and losing reactivity — use toRefs() or keep accessing properties through the object.
- Using v-if and v-for on the same element — Vue 3 evaluates v-for first, which can produce confusing results; filter the list in a computed property or move v-if to a wrapping element instead.
Ecosystem
Related guides
Related tools
This guide states trade-offs, not a single "best" answer — the right choice depends on your team, constraints, and existing stack.