Free course · 11 lessons · Beginner
Vue 3 and Nuxt
Learn Vue 3 and Nuxt 4 from the ground up: reactivity with ref, reactive, computed and watch; single-file components with props, slots, events and v-model; component tests with Vitest; composables; state with Pinia; then Nuxt pages, layouts and SEO, data fetching without double requests, server API routes, per-route rendering modes, and authentication with sessions. Every example runs: Vue code in Node, tests in Vitest, Nuxt apps built and called over HTTP.
1. Vue 3 Fundamentals
Reactivity with ref, reactive, computed and watch; single-file components with props and slots; events, v-model and component tests; composables; and state with Pinia.
- Reactivity: ref, reactive, computed and watch — Understand Vue's reactivity system: ref and reactive state, cached computed values, batched watchers, and why destructuring loses reactivity.
- Single-File Components: Props, Slots and Rendering — Build typed single-file components with defineProps and defaults, compose them with default and named slots, and render lists and conditions.
- Events, v-model and Component Tests — Emit typed events, implement v-model with defineModel, and test components with Vitest and Vue Test Utils.
- Composables: Reusable Stateful Logic — Extract reusable stateful logic into composables that return refs, accept reactive inputs, and clean up after themselves with effect scopes.
- State Management with Pinia — Organize shared state with Pinia setup stores, use getters and actions, keep reactivity with storeToRefs, and avoid shared state across SSR requests.
2. Building Apps with Nuxt
File-based routing, layouts and SEO; data fetching without double requests; server API routes with validation; per-route rendering modes; and authentication with sessions and middleware.
- Nuxt Pages, Layouts, Routing and SEO — Build pages with Nuxt's file-based router, share layouts, read route params, set SEO metadata, and return real 404 pages.
- Data Fetching with useFetch and useAsyncData — Fetch data once on the server and reuse it in the browser with useFetch and useAsyncData, load in parallel, trim payloads, and handle errors.
- Server API Routes with Validation — Build API endpoints in Nuxt's server directory: validated bodies and params, typed errors, server middleware, runtime config and status codes.
- Rendering Modes and Route Rules — Choose rendering per route with routeRules: prerendering, stale-while-revalidate caching, client-only pages, redirects and headers.
- Authentication with Sessions and Route Middleware — Add login to a Nuxt app with sealed server sessions, protect API routes with a server helper, and guard pages with route middleware that works during SSR.
3. Capstone
Design a production Vue and Nuxt application.
- Capstone: A Recipe Platform with Nuxt — Design a Nuxt application for a recipe community: rendering per route, data fetching, state, API design, authentication and quality.