Free through lesson 3

Vue.js Fundamentals Course

From setting up your environment with Vite to template syntax, ref and reactivity, props and emit, the Composition API, Vue Router, Pinia, forms and validation, TypeScript, and testing. Over 30 lessons, you'll finish and build a ToDo app, wrapping up by clarifying how Vue differs from React so you can judge which to pick yourself. All code and test output was actually run on Vue 3.5.13 and Vitest 3.

Start from lesson 1 Unlock every course

Curriculum

The 30 lessons are split into 6 chapters. We recommend working through them in order starting from Chapter 1, but feel free to skip around to whatever interests you. * .vue files (single-file components) can't run in the browser here, so try them in the Vite project you'll set up in Lesson 1. This course assumes the basics from JavaScript.

Chapter 1 — Getting Started with Vue (lessons 1–5)

You'll create a project with Vite and get a handle on template syntax, v-if and events, and ref and reactivity. You'll finish by building a component as a .vue file (a single-file component) and reusing it from a parent.

1

Building a Minimal Vue App with Vite

Create a Vue 3 project with Vite and drive a counter with ref. Confirm with a Vitest test your first taste of reactivity — the screen following along whenever the value changes.

Free
2

Template Syntax (Interpolation and v-bind)

{{ }} interpolation, binding attributes with v-bind (:), :class's object syntax, and what expressions you can write in a template. The trap where forgetting : turns it into a plain string.

Free
3

Branching with v-if, Handling Events with @click

Branch what's shown with v-if/v-else, and build an open/close toggle handling clicks with v-on (@). Confirm with a test that v-if removes the whole element from the DOM, versus v-show.

Free
4

ref and Reactivity (Why .value Is Needed)

Compare a ref-wrapped value against a plain variable side by side. Confirm with a test that a plain variable never triggers a re-render, and why .value is needed in script but not the template.

🔒 Basic
5

Single-File Components (.vue's 3 Blocks)

Write a component with 3 blocks — script setup, template, style scoped — then import and reuse it from a parent. The build setup for .vue, PascalCase naming, and how far scoped reaches.

🔒 Basic

Chapter 2 — Assembling Components (lessons 6–10)

You'll pass values from parent to child with props, notify a parent from a child with emit, and inject content with slots. Render lists with v-for and key, finishing by tying input to state with v-model.

6

Passing Data from Parent to Child with props

Declare type, required, and default with defineProps, and pass values from parent to child. Why strings pass as-is but numbers need :, and why you must never mutate props inside the child.

🔒 Basic
7

Raising Events from Child to Parent with emit

Declare it with defineEmits, and notify a parent with emit('like'). Keep state in the parent and keep the child thin — display and events only. Test that the event fired with emitted().

🔒 Basic
8

Building a Component You Can Fill with Slots

Use named slots and the default slot to build a component that provides only the frame, leaving content up to whoever uses it. Injecting with #title, default content, and when to use props instead.

🔒 Basic
9

Rendering a List with v-for, and Adding key

Render an array as a list with v-for, and give it a stable id as key. Confirm with a test that deleting the first item updates the screen, and why you should never use index as key.

🔒 Basic
10

Tying Input to State with v-model

Tie a text input and checkbox to a ref with v-model, confirming with setValue that input flows into a preview. What v-model expands to, why not to mix with :value, and receiving it as a number.

🔒 Basic

Chapter 3 — Composition API (lessons 11–16)

You'll round out your Composition API toolkit with reactive, computed, watch, and lifecycle hooks. You'll finish by pulling logic out into a composable, and see for yourself the trap where reactivity breaks.

11

Handling Objects with reactive (vs. ref)

Make a whole object reactive with reactive, writing it without .value. Why it suits something bundled like a form, the trap of reassignment/destructuring breaking the connection, and when to use ref.

🔒 Basic
12

Building Computed Properties with computed

Derive a value from state with computed, recalculating only on dependency change. Stack a subtotal and tax total to confirm it tracks, its caching edge over a method, and never mutate state inside it.

🔒 Basic
13

Watching Changes and Running Side Effects with watch

React to a value's change with watch, receiving old and new values to log. When to use it over computed, how to write immediate, deep, and watchEffect, and why not to reach for watch for everything.

🔒 Basic
14

Lifecycle (onMounted and onUnmounted)

Start work right after mounting to the DOM with onMounted, and clean up with onUnmounted. Confirm the state change and the clearInterval call with a test, and what happens if you forget to clean up.

🔒 Basic
15

Building Your Own Composable (a use~ Function)

Bundle counter logic into a function called useCounter, confirming each call creates independent state. The advantage of testing it without a component, and when to use Pinia instead.

🔒 Basic
16

Reactivity Traps (Destructuring and toRefs)

Why destructuring a reactive object drops it from the Proxy and breaks tracking, and how toRefs keeps the connection. The standard pattern of returning toRefs(state), and destructuring props.

🔒 Basic

Chapter 4 — Routing and State Management (lessons 17–22)

You'll split pages with Vue Router and use dynamic routes and navigation guards. Create a store with Pinia to share state, finishing by handling asynchronous data fetching.

17

Switching Pages with Vue Router

Write a map of URLs to components in routes, navigate with router-link, and render into router-view. Testing with createMemoryHistory, and how to choose a history mode.

🔒 Basic
18

Dynamic Routes and Reading Parameters with useRoute

Reuse one component for different IDs via the dynamic segment /users/:id, reading the value with useRoute().params.id. The catch: onMounted doesn't re-run on reuse, plus props: true.

🔒 Basic
19

Protecting Pages with Navigation Guards

Tag routes with meta, and intercept navigation with router.beforeEach to send non-logged-in users to /login. Test it by injecting the login check from outside, and watch for infinite redirects.

🔒 Basic
20

Building a Store with Pinia

Build a setup-style store with defineStore, sharing state across unrelated components. Test via the screen and on its own, extract values with storeToRefs, and see why not everything belongs there.

🔒 Basic
21

Pinia's getter and action (Building a Cart)

In a setup-style store, state is a ref, getter is computed, and action is a function. Derive a cart's item count and total price with getters, and test them with no UI at all.

🔒 Basic
22

Async Data Fetching (Loading, Error, Success)

When fetching with fetch, hold 3 states — loading, error, success — branched with try/catch/finally and v-if/v-else-if/v-else. Mock fetch to test both outcomes, and watch for race conditions.

🔒 Basic

Chapter 5 — Using It for Real Work (lessons 23–27)

You'll get a handle on form modifiers and validation, using it alongside TypeScript, and testing components. You'll finish by building a product list that combines every tool so far.

23

v-model's Modifiers (.trim, .number, .lazy)

Add .trim and .number to v-model to clean input before receiving it. Confirm with a test that whitespace strips and type becomes number, plus .lazy, empty input, and bundling a form with reactive.

🔒 Basic
24

Validation (Pulling Rules Out into Pure Functions)

Pull validation into pure functions apart from the UI, deriving errors and submit eligibility with computed, tied to :disabled. Test the screen and rules separately, and weigh touched/libraries.

🔒 Basic
25

Using It with TypeScript (Typed props)

Type props with script setup lang="ts" and defineProps's type argument. vue-tsc catches wrong types during type-checking; Vitest just strips types and runs. Plus withDefaults and ref's type inference.

🔒 Basic
26

Testing Components (Checking Behavior)

Using a Stepper as the subject, confirm "click → display and button state" with Vitest and @vue/test-utils. Basic tools like mount, get, trigger, attributes, and why you test behavior, not internals.

🔒 Basic
27

[Project] Building a Product List (Filtering and Sorting)

Build a product list filterable by category and sortable by price. Pull the logic into pure functions, tie it to a select's v-model and computed, and test screen and functions separately.

🔒 Basic

Chapter 6 — Building and Publishing (lessons 28–30)

You'll finish a ToDo app, build it for production, and publish it. You'll wrap up by clarifying how it differs from React, so you can judge which to pick yourself.

28

[Project] Building a ToDo App with Pinia

Build a ToDo app with adding, completing, deleting, and a remaining count. Push state and logic into a Pinia store, and keep the screen thin — nothing but @submit.prevent and calling actions.

🔒 Basic
29

Build and Deploy (dist to Static Hosting)

Output static files to dist/ with npm run build, check with preview, then host statically. Read the mode with import.meta.env, and watch for direct URL typing in an SPA and VITE_-prefixed env vars.

🔒 Basic
30

How It Differs from React, and Which to Choose

Lay out React/Vue equivalents — useState/ref, useMemo/computed, useEffect/watch. Differences in dependency tracking, re-rendering, templates, and doc coverage, plus how to choose between them.

🔒 Basic

Once you've finished all 30 lessons, move on to TypeScript to guard your components with types. A membership unlocks every course.