What Is Vue

Introduction

Vue is a progressive JavaScript framework for building user interfaces and single-page applications (SPAs). You describe what the UI should look like for a given state; Vue keeps the DOM in sync when data changes. This chapter explains Vue’s core ideas, how Vue 3 compares to other frameworks, and where this Hello Code track fits with JavaScript, TypeScript, and backend APIs.

Prerequisites

• Basic comfort with HTML and CSS
• Helpful: skim What Is JavaScript—you do not need a framework yet
• No Vue installation required for this overview

What Problem Vue Solves

Without a framework, you manually find DOM nodes and update them:

const countEl = document.querySelector("#count");
let count = 0;
 
document.querySelector("#inc").addEventListener("click", () => {
  count += 1;
  countEl.textContent = String(count);
});

That scales poorly as screens grow. Vue uses declarative rendering: the template reflects state; Vue patches the DOM when state changes.

  State (data)  →  Vue reactivity  →  DOM updates
       ↑                                    │
       └──────── user events / API ─────────┘

Code explanation:

• You focus on what to show, not how to mutate every node
• Same idea as DOM manipulation—automated at scale

Progressive Framework

Progressive means you can adopt Vue in layers:

You are not forced into an all-or-nothing architecture on day one.

Vue 3 Core Ideas

This track uses Vue 3.4+, Vite, Vue Router 4, and Pinia 2.

Vue 2 vs Vue 3

Options API still works in Vue 3 for old codebases—you will see a mapping table in later chapters.

Vue vs React vs Angular (Brief)

Hello Code has deep JavaScript and TypeScript tracks; this Vue track assumes that foundation.

Typical Use Cases

• Admin dashboards — tables, forms, filters
• Marketing SPAs — landing pages with client routing
• Frontends for APIs — consume FastAPI, Flask, or Django REST
• Embedded widgets — drop a Vue app into one <div> on an existing site

SPA and Backend Separation

  Browser (Vue on :5173)          API (FastAPI on :8000)
        │                                  │
        │  GET /api/v1/posts               │
        ├─────────────────────────────────►│
        │◄─────────────────────────────────┤ JSON
        │  render list in components       │

The browser loads one HTML shell; Vue handles navigation without full page reloads. Cross-origin setup needs CORS or a dev proxy—Fetching API and CORS.

Hello Code Track Map

What You Will Learn

Full list: Vue Chapter Index.

FAQ

Do I need to know React first?

No. Learn JavaScript fundamentals, then Vue directly.

Vue or React for a new job?

Both are widely used. Vue’s templates feel closer to HTML; React’s JSX feels closer to JavaScript. Hello Code has a full React track—pick one and build projects.

Is Vue a full stack framework?

Vue is the UI layer. Nuxt adds routing, SSR, and server features on top—optional.

Vue CLI vs Vite?

New projects use npm create vue@latest (Vite). Vue CLI is legacy for most learners.

Can I use Vue without Node.js?

You can try Vue from a CDN for tiny demos; this track uses Vite + npm like real teams.

Where is the chapter list?

See frontend/gen_article_plan/vue.md and Vue Chapter Index.