Vue.js: Components, Reactivity & the Composition API

Vue.js

Vue is a progressive JavaScript framework for building user interfaces. "Progressive" means you can adopt it incrementally — drop it into one page, or build a full single-page app — using HTML-based templates that feel familiar to anyone who knows the web platform.

Created by Evan You in 2014, Vue aims for a gentler on-ramp than Angular and a more batteries-included experience than React, while keeping a reactive core that updates the DOM automatically when your data changes.

TL;DR

Build UI from single-file components (.vue): template + script + scoped styles.
Reactive state (ref, reactive) updates the DOM automatically.
Prefer the Composition API with <script setup> for new code.
Use Pinia for shared state and Nuxt for SSR/SSG and SEO.

Quick Example

A single-file component using <script setup> and a reactive ref:

Core Concepts

Single-File Component (SFC) — .vue file bundling template, logic, and styles.
Template directives — v-if, v-for, v-model (two-way binding), @event.
Reactivity — ref() for primitives, reactive() for objects; reads are tracked, writes trigger updates.
Props & emits — data flows down via props; children communicate up via emitted events.

Composition vs Options API

The Composition API (setup, composables) organizes logic by feature and is the recommendation for new apps. The older Options API (data, methods, computed) groups code by option type and remains fully supported.

Best Practices

Default to <script setup> + Composition API for less boilerplate.
Extract reusable logic into composables (useXxx functions).
Use computed for derived values instead of recomputing in the template.
Reach for Pinia when state is shared across components; Nuxt when you need SSR or SEO.

Comparison: Vue vs React

See React for the other side.

Common Mistakes

Losing reactivity by destructuring

Mutating props

FAQ

Should I use Vue 2 or Vue 3?

Vue 3 — it's the current default, with the Composition API, better TypeScript support, and improved performance. Vue 2 reached end of life, so new projects should start on 3.

Composition API or Options API?

Composition API for new code: it scales better, enables logic reuse via composables, and has stronger TypeScript inference. The Options API is still supported and fine for small components.

Pinia or Vuex?

Pinia — it's the official state library for Vue 3, with a simpler API and first-class TypeScript support. Vuex is in maintenance mode.

Do I need Nuxt?

Use Nuxt when you need server-side rendering, static generation, file-based routing, or strong SEO. For a purely client-side app, plain Vue is enough. See Nuxt.