Vue – Get Started | Love Me Some Coding

Vue is a framework for building web interfaces. It sits between React and Angular on almost every axis: more batteries-included than React, far less ceremony than Angular, and the only one of the three whose core team publishes an official router and an official state library rather than leaving you to pick.

The thing people notice first is that a Vue component looks like the web platform. A template that is real HTML, a script block that is real JavaScript, and styles scoped to the component — three sections of one file. There is no JSX to learn and no decorator metadata to memorise.

What changed, and why old tutorials mislead

Almost everything written about Vue before 2021 describes Vue 2, and a lot of what is written since still shows the older of Vue 3's two styles. If you have read about Vue before, these are the things that are no longer the default:

The Composition API replaced the Options API for new code. Instead of a component being an object with data, methods and computed keys, it is a setup function where those are just variables and functions. This track uses <script setup> throughout. Lesson 18 covers the Options API once, because you will have to read it, and then never uses it again.

Vuex was replaced by Pinia as the official state library. If a tutorial mentions mutations, it predates this. Pinia has no mutations — a store action just changes the state.

Vue CLI and webpack were replaced by Vite, which is by the same author and is what npm create vue@latest now gives you.

Multiple root elements are allowed. Vue 2 required a template to have exactly one root node. Vue 3 does not.

Vue compared to React and Angular

Short version, so you know what you are choosing:

Against React: Vue tracks dependencies for you. When a value a template reads changes, that template re-renders and nothing else does — there is no dependency array, no useMemo, no useCallback, and no "why did this render twice". The cost is that reactivity is a system with rules you have to learn, rather than plain function calls.

Against Angular: Vue asks for far less up front. No decorators, no dependency injection container, no NgModules, no RxJS. You can be productive in a day. The cost is that a large Vue codebase has fewer enforced conventions, so the structure is yours to maintain.

This track does not claim Vue is the best of the three. It is a genuinely good default for most applications, and the reasons it might not suit yours are worth knowing early.

Versions this track is written against

Every example below comes from a real application pinned to these. When they move, expect small differences.

{
  "vue": "3.5.41",
  "vite": "8.2.2",
  "@vitejs/plugin-vue": "6.0.8",
  "vue-router": "4.6.4",
  "pinia": "4.0.3",
  "bootstrap": "5.3.8",
  "node": "22"
}

Seeing it run

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

The first command asks a short series of questions — router, Pinia, testing, TypeScript. Answer yes to Router and Pinia if you want to follow this track closely. Then http://localhost:5173, and it reloads as you edit. The next lesson goes through what those commands generated.

The application every example comes from

This track does not invent snippets. Almost every block of code in it is copied from ReelCMS — a working short-video CMS with a vertical scroll-snap feed, full-text search and tag browsing, permalinks for reels, creators and collections, JWT authentication with two roles, video uploads, and an admin console whose dashboard figures all come from real database aggregates.

It is Vue 3.5 with <script setup> throughout, Vite, Vue Router, Pinia, Bootstrap 5 and Chart.js, talking to a Spring Boot and MongoDB backend. One app serves both surfaces, split by layout rather than by build: / is the public site and /admin is behind a router guard.

A few things are worth saying plainly before you meet them:

It is plain JavaScript, not TypeScript. The React and Angular tracks on this site are both TypeScript, and this one is not, because the application it quotes is not. Snippets are copied verbatim so they can be checked against the source automatically, and inventing types that the real file does not have would break that. Where TypeScript changes the answer — and for props it changes it quite a lot — the lesson says so and shows the typed form.

It has a mock API. Everything the UI needs goes through one module, and a single environment variable swaps a fake in-memory implementation for real HTTP. That is why the code in lesson 22 looks the way it does, and it is a pattern worth stealing.

What you should know first

JavaScript, comfortably: const, arrow functions, destructuring, spread, map/filter, promises and async/await. Vue leans on all of them constantly and this track does not stop to explain them.

HTML and CSS well enough to build a page without a framework. Vue templates are HTML, so the better your HTML is, the better your Vue is.

You do not need React or Angular. Where this track compares Vue to them, the point stands without having used either.

The lessons

In order. Each builds on the one before, and the first four are short.

Getting started

Reactivity

Components

Reusing logic and state

Routing, forms and data

Advanced features and shipping

Start here

Set Up a Project with Vite — one command, and what each of the files it generates is actually for.