What is Vue.js? A Beginner's Guide to the Progressive JavaScript Framework

If React feels like JavaScript with a UI library bolted on, Vue feels like HTML and CSS that quietly grew superpowers. Created by Evan You in 2014 — an ex-Google engineer who liked Angular's templates but wanted something lighter — Vue has grown into the second most-used front-end framework in the world, with adoption inside Nintendo, GitLab, Alibaba, Adobe, and thousands of European agencies and startups in 2026.

This guide explains what Vue actually is, what "progressive" means in practice, how its single-file components work, and how to write your first one. By the end you will have a real mental model and the confidence to scaffold a Vue project on your own.

What Vue Actually Is

Vue is an open-source JavaScript framework for building user interfaces. The current major version everyone uses in 2026 is Vue 3 (the 3.x line, currently 3.5+, with Vapor Mode landing as the new compile-to-vanilla-DOM strategy). Vue 2 reached end-of-life in late 2023; nothing new should target it.

Where React gives you a tiny core and asks you to assemble the rest of the puzzle yourself, Vue ships with first-party answers for the things every app needs: a router (Vue Router), a state library (Pinia), a build tool (Vite, created by the same author), a testing setup, and a meta-framework (Nuxt) for full-stack apps. The pieces are designed together, which is why Vue projects feel coherent even after a year of growth.

What "Progressive" Actually Means

Vue's tagline since day one has been "the progressive JavaScript framework." It is not marketing fluff — it describes how you adopt it.

You can drop Vue into a single page on an existing PHP or Rails site by including a <script> tag and using it for one widget. You can build a small SPA with Vue + Vue Router. You can build a full-stack app with Nuxt. You can ship a desktop app with Tauri or a mobile app with Quasar. Same framework, scaling smoothly with your needs. Most React tutorials assume you build the world from scratch; Vue is designed for you to start small and grow.

Single-File Components: The Vue Idea

The signature feature of Vue is the single-file component (SFC) — a .vue file that holds template, script, and style for one component, scoped together.

vue

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
 
<template>
  <button @click="count++">Clicked {{ count }} times</button>
</template>
 
<style scoped>
button { padding: .5rem 1rem; border-radius: .5rem; }
</style>

Three things to notice. The template is real HTML — no JSX, no render functions — with a small set of directives (@click, :value, v-if, v-for). The script uses <script setup>, the modern Composition API style that lets you declare reactive state with ref(). The style is scoped — its rules apply only to this component, no class-name collisions ever. You can go deeper into reactivity in the Vue Composition API article.

Reactivity, the Vue Way

When you wrap a value in ref() (or an object in reactive()), Vue tracks every place it is read and re-runs only the parts of the DOM that depend on it when the value changes. You write what the UI should look like for the current state and Vue handles the diffing.

The big difference from React: you never call a setter. count.value++ (in script) or count++ (in template, where .value is unwrapped) is enough — Vue notices and updates. There is no rule about not mutating; the reactivity system is built around mutation.

In templates, the directives cover almost everything you will need on day one:

• {{ expression }} — interpolation.
• :attr="value" — bind an attribute (v-bind shorthand).
• @event="handler" — listen to an event (v-on shorthand).
• v-if / v-else-if / v-else — conditional rendering.
• v-for="item in items" :key="item.id" — list rendering.
• v-model="state" — two-way binding for form inputs.

That last one is uniquely Vue. v-model="email" on an <input> keeps the input and your state in sync both ways with zero boilerplate.

How to Start a Vue Project in 2026

You need Node.js 22 LTS or newer. Then:

bash

npm create vue@latest my-app
cd my-app
npm install
npm run dev

The CLI asks about TypeScript, Vue Router, Pinia, ESLint, and Vitest. Say yes to TypeScript, Router, Pinia, and ESLint for any real project — that is the 2026 default stack. The dev server runs on Vite and gives you instant hot reload at http://localhost:5173.

For full-stack apps with server rendering, file-based routing, and a built-in API layer, scaffold with Nuxt instead: npx nuxi@latest init my-app. Nuxt is to Vue what Next.js is to React.

Vue vs React in One Honest Paragraph

React is the bigger ecosystem, the safer hire, and the default choice in the US. Vue is more opinionated, has a gentler learning curve, ships first-party answers for routing and state, and dominates in Asia and Europe. Pick React if you want maximum job-market reach. Pick Vue if you want the fastest time from "I want to build something" to "I built something." Both are excellent and neither is going away in 2026.

Common Mistakes Beginners Make

• Forgetting .value when using ref() in script. count is the ref object; count.value is the value.
• Mutating props directly. Props are read-only; emit an event back to the parent instead.
• Skipping :key on v-for. Vue can render without it, but it warns and will misbehave on reorders.
• Following Vue 2 tutorials. Anything teaching Vue.extend, data() returning everything, or the Options API as the default is older. Composition API + <script setup> is the modern way.
• Reaching for Vuex. It is replaced by Pinia — simpler, fully typed, and the official recommendation in 2026.

Quick Reference

• Create: npm create vue@latest
• Run dev: npm run dev (Vite, hot reload)
• SFC structure: <script setup> + <template> + <style scoped>
• Reactive value: const x = ref(0) → x.value in script, {{ x }} in template
• Conditional: v-if, list: v-for with :key, two-way: v-model
• Events: @click="...". Attrs: :href="...". Interpolation: {{ ... }}
• State: Pinia. Router: Vue Router. Full-stack: Nuxt
• Devtools: install Vue Devtools browser extension