The trunk · Start hereBeginner 0 of 11 done Lesson 01Your first componentLesson 02Reactivity basicsLesson 03DirectivesLesson 04Class and style bindingsLesson 05Computed propertiesLesson 06Forms and inputsLesson 07Components and propsLesson 08Events and v-modelLesson 09SlotsLesson 10Lifecycle and template refsLesson 11Watchers Show lessons in Beginner
Projects & tooling0 of 6Lesson 01Start a project with create-vueLesson 02Project structure and conventionsLesson 03Editor and Vue DevToolsLesson 04Linting and formattingLesson 05Environment variables, builds and deploymentLesson 06Internationalisation with vue-i18nOpen trackProjects & tooling
Advanced Vue0 of 11Lesson 01Watchers in depthLesson 02Reactivity in depthLesson 03ComposablesLesson 04Provide and injectLesson 05Custom directives and pluginsLesson 06Dynamic and async componentsLesson 07Error handling and debuggingLesson 08Teleport and SuspenseLesson 09Render functions and JSXLesson 10Reading Options API codeLesson 11Performance and Vapor ModeOpen trackAdvanced Vue
Pinia0 of 6Lesson 01Your first storeLesson 02Setup storesLesson 03storeToRefsLesson 04Stores working togetherLesson 05Persisting state and pluginsLesson 06Data fetching with Pinia ColadaOpen trackPinia
VueUse0 of 6Lesson 01Meet VueUseLesson 02Saving state with useStorageLesson 03Debounce, throttle and timersLesson 04Sensors and the viewportLesson 05Async state and networkLesson 06Write a composable like VueUseOpen trackVueUse
Styling & UI0 of 5Lesson 01CSS in single-file componentsLesson 02Dark mode and themingLesson 03Tailwind CSS with VueLesson 04Accessible componentsLesson 05Component librariesOpen trackStyling & UI
Animation0 of 4Lesson 01Enter and leave with TransitionLesson 02Animating lists with TransitionGroupLesson 03Motion for Vue and auto-animateLesson 04Page and view transitionsOpen trackAnimation
Forms0 of 4Lesson 01Form state and validation by handLesson 02Schema validation with ZodLesson 03Form libraries: UForm, TanStack Form and VeeValidateLesson 04File uploadsOpen trackForms
Nuxt0 of 11Lesson 01A Nuxt project tourLesson 02File-based routingLesson 03Layouts and page metaLesson 04SSR and hydrationLesson 05Data fetchingLesson 06Server routesLesson 07State: useState, Pinia and cookiesLesson 08Middleware, sessions and authLesson 09SEO, meta and error pagesLesson 10Rendering modes and deploymentLesson 11Modules, plugins and layersOpen trackNuxt
Testing0 of 7Lesson 01Vitest and Vue Test UtilsLesson 02Testing props, emits and slotsLesson 03Testing async code and mocksLesson 04Testing Pinia storesLesson 05Testing Library and browser modeLesson 06Testing Nuxt appsLesson 07End-to-end tests with PlaywrightOpen trackTesting
Multiplatform0 of 5Lesson 01Installable web apps (PWA)Lesson 02Mobile apps with CapacitorLesson 03Mobile UI with Ionic VueLesson 04Desktop apps with TauriLesson 05Tauri plugins, mobile and updatesOpen trackMultiplatform
TypeScript0 of 4Lesson 01Type checking and editor setupLesson 02Typing props, emits and modelsLesson 03Typing refs, computed and injectLesson 04Generic components, slots and exposeOpen trackTypeScript
Routing0 of 5Lesson 01Your first routerLesson 02Dynamic routes and paramsLesson 03Nested routes and layoutsLesson 04Navigation guardsLesson 05File-based routing with Vue Router 5Open trackRouting
Security & OWASP0 of 7Lesson 01The OWASP Top 10, for Vue developersLesson 02Authentication, sessions and CSRFLesson 03Broken access control and SSRFLesson 04Injection and cross-site scriptingLesson 05Security misconfiguration, headers and CSPLesson 06Supply chain and integrityLesson 07API security, errors and loggingOpen trackSecurity & OWASP
AI & LLMs0 of 10Lesson 01AI for Vue developers: the mapLesson 02Streaming AI responsesLesson 03Tools and structured output with the AI SDKLesson 04Retrieval: a chatbot that knows your docsLesson 05Securing and testing AI featuresLesson 06Chrome's built-in AI APIsLesson 07Models in the browser: WebLLM and Transformers.jsLesson 08WebMCP: let agents use your appLesson 09llms.txt: make your site readable by modelsLesson 10MCP servers and AI-assisted developmentOpen trackAI & LLMs
Data & APIs0 of 5Lesson 01Fetching data in a componentLesson 02A reusable fetch composableLesson 03Query libraries, TanStack Query and Pinia ColadaLesson 04Mutations, optimistic updates and paginationLesson 05Real-time with WebSockets and SSEOpen trackData & APIs
Graphics & 3D0 of 3Lesson 01Reactive SVG chartsLesson 02Canvas and animation loopsLesson 033D scenes with TresJSOpen trackGraphics & 3D