Vue Foundations
Vue Foundations picks up where React Foundations left off. You already know how to build reactive SPAs — components, state, routing, and side effects. Now you will apply that foundation to Vue 3, where the same concepts look and feel different: Single-File Components, the Composition API, Vue Router, and Pinia.
Every concept in this course is applied directly to FamilyTree — an interactive family tree SPA that you build from scratch across all seven modules.
What you will learn
Section titled “What you will learn”- Vue fundamentals — what Vue is, how Vite scaffolds a project, and how Single-File Components work
- Components —
defineProps,defineEmits, slots, and how data flows between parent and child - Reactivity —
ref,reactive,computed,watch,watchEffect, and the Vue lifecycle - Directives —
v-bind,v-on,v-if,v-for,v-model, and class/style bindings - Vue Router — client-side routing,
RouterView,RouterLink, route parameters, and navigation guards - Pinia —
defineStore, state, getters, actions,storeToRefs, and persisting state across sessions
Prerequisites
Section titled “Prerequisites”This course assumes you have completed TypeScript Foundations or have equivalent knowledge. You should be comfortable with TypeScript types, interfaces, generics, and async/await. No prior Vue experience is assumed.
The FamilyTree project
Section titled “The FamilyTree project”All seven modules build the same real application — FamilyTree, an interactive family tree SPA where you can record people, relationships, and navigate a focus-view tree. You can browse the source on GitHub.
The finished app:
- Lets you add people with names, birth/death years, and a short bio
- Displays a focus-view tree showing parents, siblings, the focused person, their spouse, and children
- Lets you click any person to shift focus, navigating the tree
- Supports biological parents, step-parents, biological children, step-children, siblings, and multiple spouses with marriage and divorce dates
- Persists your entire family tree to localStorage so it survives page refreshes
By Module 07 you will wire all of these pieces together into a working, deployed Vue app.
Modules
Section titled “Modules”01 — Getting Started with Vue
Section titled “01 — Getting Started with Vue”- What Is Vue
- Creating a Project with Vite
- Your First Vue App
- Project Structure
- Single-File Components
- Module Recap
02 — Components and Props
Section titled “02 — Components and Props”03 — Reactivity and State
Section titled “03 — Reactivity and State”- Understanding Reactivity
- ref and reactive
- computed Properties
- watch and watchEffect
- Lifecycle Hooks
- Module Recap
04 — Directives and Templates
Section titled “04 — Directives and Templates”- v-bind and v-on
- v-if, v-else, and v-show
- v-for and List Rendering
- v-model and Two-Way Binding
- Class and Style Bindings
- Module Recap
05 — Vue Router
Section titled “05 — Vue Router”- Client-Side Routing
- Defining Routes and RouterView
- RouterLink and Navigation
- Route Parameters and useRoute
- Programmatic Navigation and Guards
- Module Recap
06 — State Management with Pinia
Section titled “06 — State Management with Pinia”- Why State Management
- Defining a Store
- State, Getters, and Actions
- Using Stores in Components
- Persisting State
- Module Recap