Learn Vue by doing. Every topic is a piece of code you can read, copy, and run in a Nuxt app — work through the lessons in order, from components and reactivity to data fetching, forms, and the patterns that make production UIs robust.
Vue is just JavaScript — be comfortable with it (and ideally TypeScript) first.
Before you start
If you want to practice the exercises in this course on your computer:
Ctrl+`).pnpm create nuxt@latest my-app if you are using pnpm, or npm create nuxt@latest my-app if you are using npm. This creates a my-app folder containing a Nuxt project — the setup every example in this course is written for.my-app folder (File → Open Folder) and run pnpm dev (or npm run dev) in the terminal.app/app.vue — with the dev server running, http://localhost:3000 updates every time you save the file.Components & Templates
Write your first components — Single-File Components, template syntax, props, conditional rendering, lists and keys, emits, and composition with slots.
Reactivity Fundamentals
Master Vue reactivity — ref for state, mutation-friendly updates, computed values, watchers, template refs, lifecycle hooks, and reusable composables.
Sharing State
Share state across components the right way — lift state to a common parent, two-way bind with defineModel, provide/inject for app-wide values, and Pinia stores.
Fetching Data
Load and mutate data in a Nuxt app — useFetch for server-rendered data, then TanStack Query for client-side reads and mutations with caching built in.
Forms & Validation
Build forms that validate themselves — v-model with modifiers, Zod schemas that check data at runtime, and VeeValidate wired to Zod for typed, validated forms.
Styling & UI
Style Vue components — scoped styles built into SFCs, Tailwind utility classes with :class bindings, and shadcn-vue components you own and can restyle freely.
Robust UIs
Make your app resilient and responsive — error boundaries that contain crashes, lazy components for smaller pages, and Teleport for modals that escape clipping.
Testing
Test components the way users use them with Vitest and Vue Testing Library, then cover critical flows end-to-end in a real browser with Playwright.
Animation
Animate entrances, exits, and list changes with the Transition and TransitionGroup components built into Vue — no library needed.