What Is Vue

You already know how to build reactive SPAs. Vue is a progressive JavaScript framework that covers the same ground as React — components, state, routing, and shared data — but with its own distinct design: Single-File Components, the Composition API, and first-party tools for routing and state management.

The problem Vue solves

A simple page — a form, a list, a bit of interactivity — works fine with vanilla JavaScript. But as apps grow, problems multiply: state gets scattered across dozens of event listeners, the DOM drifts out of sync with your data, multiple parts of the UI need to react to the same change, and the URL needs to reflect what the user sees.

Vue solves these problems with a reactive data model. Instead of manually updating the DOM when data changes, you declare what the UI should look like for a given state — and Vue keeps the DOM in sync automatically. You write components, not DOM manipulations.

Where Vue fits

Vue is one of three dominant frontend frameworks alongside React and Angular:

• React is a library, not a framework. It handles rendering but leaves routing, state, forms, and HTTP to third-party packages. Teams assemble their own stack.
• Angular is an opinionated, batteries-included framework. It ships with routing, forms, HTTP, and dependency injection. It requires TypeScript.
• Vue sits between the two. It ships with an official router and state library, but you can adopt them gradually. It works with TypeScript but doesn’t require it.

Vue’s progressive nature is its defining characteristic. You can use it as a lightweight library to enhance a single HTML page, or as a full framework with routing, state management, and a build step.

The Composition API

Vue 3 introduced the Composition API — a way to write component logic using functions (ref, computed, watch) inside a setup context. This is the modern, recommended way to write Vue and the approach used throughout this course.

The older Options API (where you export an object with data, methods, computed keys) still works, but the Composition API gives you better TypeScript support, more reusable logic, and a closer mental model to how the rest of the JavaScript ecosystem works.

This course uses the Composition API exclusively, with <script setup> syntax.

FamilyTree and this course

Throughout this course you will build FamilyTree — an interactive SPA where you record family members, define their relationships, and navigate a visual focus-view tree. Every Vue concept you learn will be applied directly to the app.

By the final module, FamilyTree will:

• Let you add people with names, years, and a bio
• Display a visual tree showing parents, the focused person, their spouse, and children
• Support biological parents, step-parents, siblings, and multiple spouses with marriage/divorce dates
• Persist the entire family tree to localStorage across sessions
• Navigate between views with Vue Router

You can browse the source on GitHub before you build it.

Exercise

No code yet — this lesson is conceptual. Answer the following in your own words:

1. What is the core problem that a reactive framework like Vue solves compared to vanilla JavaScript?
2. What is the difference between the Composition API and the Options API? Which will you use in this course?
3. Browse the FamilyTree source on GitHub. Find one file that uses ref and one that uses computed. What does each one track?

Recap

• Vue is a progressive JavaScript framework for building reactive user interfaces.
• It sits between React (library) and Angular (full framework) — official router and state library available but optional.
• Vue 3’s Composition API is the modern, recommended authoring style — this course uses it exclusively with <script setup>.
• This course builds FamilyTree — a fully deployed family tree SPA — using Vue 3, TypeScript, Vue Router, and Pinia.