--- title: "Skill tree · vuejs.school" description: "110 lessons in 17 tracks. Beginner is the trunk; every other track grows from one of its lessons." canonical_url: "https://vuejs.school/track" meta: "og:description": "110 lessons in 17 tracks. Beginner is the trunk; every other track grows from one of its lessons." "og:image": "https://vuejs.school/_og/d/a_~VGhlIHNraWxsIHRyZWUgwrcgdnVlanMuc2Nob29s%2Cc_OgCard.takumi%2Ctitle_The%2Bskill%2Btree%2Cdescription_~MTEwIGxlc3NvbnMgaW4gMTcgdHJhY2tzLCBmcm9tIHlvdXIgZmlyc3QgY29tcG9uZW50IHRvIE51eHQgaW4gcHJvZHVjdGlvbi4%2Ceyebrow_Every%2Btrack%2Band%2Blesson%2Ctint_mint%2Cp_Ii90cmFjayI%2Cs_PAz-yLi_uzQrevbu.png" "og:image:alt": "The skill tree · vuejs.school" "og:image:height": "600" "og:image:type": image/png "og:image:width": "1200" "og:title": "Skill tree · vuejs.school" "twitter:image": "https://vuejs.school/_og/d/a_~VGhlIHNraWxsIHRyZWUgwrcgdnVlanMuc2Nob29s%2Cc_OgCard.takumi%2Ctitle_The%2Bskill%2Btree%2Cdescription_~MTEwIGxlc3NvbnMgaW4gMTcgdHJhY2tzLCBmcm9tIHlvdXIgZmlyc3QgY29tcG9uZW50IHRvIE51eHQgaW4gcHJvZHVjdGlvbi4%2Ceyebrow_Every%2Btrack%2Band%2Blesson%2Ctint_mint%2Cp_Ii90cmFjayI%2Cs_PAz-yLi_uzQrevbu.png" "twitter:image:alt": "The skill tree · vuejs.school" --- > Index of every page on this site: [llms.txt](https://vuejs.school/llms.txt) # **Skill tree** Every lesson in every track. Beginner is the trunk, 16 tracks branch off it, and every track's first lesson is a place you can start. - Starting point - Done - Up next - Needs review **The trunk · Start here** ## **Beginner** 0 of 11 done 1. [Lesson 01**Your first component** Your first component, starting point, up next](https://vuejs.school/learn/beginner/your-first-component) 2. [Lesson 02**Reactivity basics** Reactivity basics, not started](https://vuejs.school/learn/beginner/reactivity-basics) 3. [Lesson 03**Directives** Directives, not started](https://vuejs.school/learn/beginner/directives) 4. [Lesson 04**Class and style bindings** Class and style bindings, not started](https://vuejs.school/learn/beginner/class-and-style-bindings) 5. [Lesson 05**Computed properties** Computed properties, not started](https://vuejs.school/learn/beginner/computed-properties) 6. [Lesson 06**Forms and inputs** Forms and inputs, not started](https://vuejs.school/learn/beginner/forms-and-inputs) 7. [Lesson 07**Components and props** Components and props, not started](https://vuejs.school/learn/beginner/components-and-props) 8. [Lesson 08**Events and v-model** Events and v-model, not started](https://vuejs.school/learn/beginner/events-and-v-model) 9. [Lesson 09**Slots** Slots, not started](https://vuejs.school/learn/beginner/slots) 10. [Lesson 10**Lifecycle and template refs** Lifecycle and template refs, not started](https://vuejs.school/learn/beginner/lifecycle-and-template-refs) 11. [Lesson 11**Watchers** Watchers, not started](https://vuejs.school/learn/beginner/watchers) [**Show lessons**](https://vuejs.school/track/beginner) ## **Branches from Your first component** Beginner 1 · Projects & tooling ### **Projects & tooling** 0 of 6 1. [Lesson 01**Start a project with create-vue** Start a project with create-vue, starting point, not started](https://vuejs.school/learn/tooling/start-a-project-with-create-vue) 2. [Lesson 02**Project structure and conventions** Project structure and conventions, not started](https://vuejs.school/learn/tooling/project-structure-and-conventions) 3. [Lesson 03**Editor and Vue DevTools** Editor and Vue DevTools, not started](https://vuejs.school/learn/tooling/editor-and-vue-devtools) 4. [Lesson 04**Linting and formatting** Linting and formatting, not started](https://vuejs.school/learn/tooling/linting-and-formatting) 5. [Lesson 05**Environment variables, builds and deployment** Environment variables, builds and deployment, not started](https://vuejs.school/learn/tooling/environment-variables-and-deployment) 6. [Lesson 06**Internationalisation with vue-i18n** Internationalisation with vue-i18n, not started](https://vuejs.school/learn/tooling/internationalisation-with-vue-i18n) [Open track](https://vuejs.school/track/tooling) ## **Branches from Reactivity basics** Beginner 2 · Advanced Vue, Pinia and VueUse ### **Advanced Vue** 0 of 11 1. [Lesson 01**Watchers in depth** Watchers in depth, starting point, not started](https://vuejs.school/learn/advanced/watchers-in-depth) 2. [Lesson 02**Reactivity in depth** Reactivity in depth, not started](https://vuejs.school/learn/advanced/reactivity-in-depth) 3. [Lesson 03**Composables** Composables, not started](https://vuejs.school/learn/advanced/composables) 4. [Lesson 04**Provide and inject** Provide and inject, not started](https://vuejs.school/learn/advanced/provide-and-inject) 5. [Lesson 05**Custom directives and plugins** Custom directives and plugins, not started](https://vuejs.school/learn/advanced/custom-directives-and-plugins) 6. [Lesson 06**Dynamic and async components** Dynamic and async components, not started](https://vuejs.school/learn/advanced/dynamic-and-async-components) 7. [Lesson 07**Error handling and debugging** Error handling and debugging, not started](https://vuejs.school/learn/advanced/error-handling-and-debugging) 8. [Lesson 08**Teleport and Suspense** Teleport and Suspense, not started](https://vuejs.school/learn/advanced/teleport-and-suspense) 9. [Lesson 09**Render functions and JSX** Render functions and JSX, not started](https://vuejs.school/learn/advanced/render-functions-and-jsx) 10. [Lesson 10**Reading Options API code** Reading Options API code, not started](https://vuejs.school/learn/advanced/reading-options-api-code) 11. [Lesson 11**Performance and Vapor Mode** Performance and Vapor Mode, not started](https://vuejs.school/learn/advanced/performance-and-vapor-mode) [Open track](https://vuejs.school/track/advanced) ### **Pinia** 0 of 6 1. [Lesson 01**Your first store** Your first store, starting point, not started](https://vuejs.school/learn/pinia/your-first-store) 2. [Lesson 02**Setup stores** Setup stores, not started](https://vuejs.school/learn/pinia/setup-stores) 3. [Lesson 03**storeToRefs** storeToRefs, not started](https://vuejs.school/learn/pinia/store-to-refs) 4. [Lesson 04**Stores working together** Stores working together, not started](https://vuejs.school/learn/pinia/stores-working-together) 5. [Lesson 05**Persisting state and plugins** Persisting state and plugins, not started](https://vuejs.school/learn/pinia/persisting-state-and-plugins) 6. [Lesson 06**Data fetching with Pinia Colada** Data fetching with Pinia Colada, not started](https://vuejs.school/learn/pinia/data-fetching-with-pinia-colada) [Open track](https://vuejs.school/track/pinia) ### **VueUse** 0 of 6 1. [Lesson 01**Meet VueUse** Meet VueUse, starting point, not started](https://vuejs.school/learn/vueuse/meet-vueuse) 2. [Lesson 02**Saving state with useStorage** Saving state with useStorage, not started](https://vuejs.school/learn/vueuse/saving-state-with-usestorage) 3. [Lesson 03**Debounce, throttle and timers** Debounce, throttle and timers, not started](https://vuejs.school/learn/vueuse/debounce-throttle-and-timers) 4. [Lesson 04**Sensors and the viewport** Sensors and the viewport, not started](https://vuejs.school/learn/vueuse/sensors-and-the-viewport) 5. [Lesson 05**Async state and network** Async state and network, not started](https://vuejs.school/learn/vueuse/async-state-and-network) 6. [Lesson 06**Write a composable like VueUse** Write a composable like VueUse, not started](https://vuejs.school/learn/vueuse/write-a-composable-like-vueuse) [Open track](https://vuejs.school/track/vueuse) ## **Branches from Class and style bindings** Beginner 4 · Styling & UI and Animation ### **Styling & UI** 0 of 5 1. [Lesson 01**CSS in single-file components** CSS in single-file components, starting point, not started](https://vuejs.school/learn/styling/css-in-single-file-components) 2. [Lesson 02**Dark mode and theming** Dark mode and theming, not started](https://vuejs.school/learn/styling/dark-mode-and-theming) 3. [Lesson 03**Tailwind CSS with Vue** Tailwind CSS with Vue, not started](https://vuejs.school/learn/styling/tailwind-css-with-vue) 4. [Lesson 04**Accessible components** Accessible components, not started](https://vuejs.school/learn/styling/accessible-components) 5. [Lesson 05**Component libraries** Component libraries, not started](https://vuejs.school/learn/styling/component-libraries) [Open track](https://vuejs.school/track/styling) ### **Animation** 0 of 4 1. [Lesson 01**Enter and leave with Transition** Enter and leave with Transition, starting point, not started](https://vuejs.school/learn/animation/enter-and-leave-with-transition) 2. [Lesson 02**Animating lists with TransitionGroup** Animating lists with TransitionGroup, not started](https://vuejs.school/learn/animation/animating-lists-with-transitiongroup) 3. [Lesson 03**Motion for Vue and auto-animate** Motion for Vue and auto-animate, not started](https://vuejs.school/learn/animation/motion-libraries-and-view-transitions) 4. [Lesson 04**Page and view transitions** Page and view transitions, not started](https://vuejs.school/learn/animation/page-and-view-transitions) [Open track](https://vuejs.school/track/animation) ## **Branches from Forms and inputs** Beginner 6 · Forms ### **Forms** 0 of 4 1. [Lesson 01**Form state and validation by hand** Form state and validation by hand, starting point, not started](https://vuejs.school/learn/forms/form-state-and-validation-by-hand) 2. [Lesson 02**Schema validation with Zod** Schema validation with Zod, not started](https://vuejs.school/learn/forms/schema-validation-with-zod) 3. [Lesson 03**Form libraries: UForm, TanStack Form and VeeValidate** Form libraries: UForm, TanStack Form and VeeValidate, not started](https://vuejs.school/learn/forms/form-libraries-veevalidate-and-formkit) 4. [Lesson 04**File uploads** File uploads, not started](https://vuejs.school/learn/forms/file-uploads) [Open track](https://vuejs.school/track/forms) ## **Branches from Components and props** Beginner 7 · Nuxt, Testing and Multiplatform ### **Nuxt** 0 of 11 1. [Lesson 01**A Nuxt project tour** A Nuxt project tour, starting point, not started](https://vuejs.school/learn/nuxt/a-nuxt-project-tour) 2. [Lesson 02**File-based routing** File-based routing, not started](https://vuejs.school/learn/nuxt/file-based-routing) 3. [Lesson 03**Layouts and page meta** Layouts and page meta, not started](https://vuejs.school/learn/nuxt/layouts-and-page-meta) 4. [Lesson 04**SSR and hydration** SSR and hydration, not started](https://vuejs.school/learn/nuxt/ssr-and-hydration) 5. [Lesson 05**Data fetching** Data fetching, not started](https://vuejs.school/learn/nuxt/data-fetching) 6. [Lesson 06**Server routes** Server routes, not started](https://vuejs.school/learn/nuxt/server-routes) 7. [Lesson 07**State: useState, Pinia and cookies** State: useState, Pinia and cookies, not started](https://vuejs.school/learn/nuxt/state-and-composables) 8. [Lesson 08**Middleware, sessions and auth** Middleware, sessions and auth, not started](https://vuejs.school/learn/nuxt/middleware-sessions-and-auth) 9. [Lesson 09**SEO, meta and error pages** SEO, meta and error pages, not started](https://vuejs.school/learn/nuxt/seo-meta-and-error-pages) 10. [Lesson 10**Rendering modes and deployment** Rendering modes and deployment, not started](https://vuejs.school/learn/nuxt/rendering-modes-and-deployment) 11. [Lesson 11**Modules, plugins and layers** Modules, plugins and layers, not started](https://vuejs.school/learn/nuxt/modules-and-the-nuxt-ecosystem) [Open track](https://vuejs.school/track/nuxt) ### **Testing** 0 of 7 1. [Lesson 01**Vitest and Vue Test Utils** Vitest and Vue Test Utils, starting point, not started](https://vuejs.school/learn/testing/vitest-and-vue-test-utils) 2. [Lesson 02**Testing props, emits and slots** Testing props, emits and slots, not started](https://vuejs.school/learn/testing/testing-props-emits-and-slots) 3. [Lesson 03**Testing async code and mocks** Testing async code and mocks, not started](https://vuejs.school/learn/testing/testing-async-code-and-mocks) 4. [Lesson 04**Testing Pinia stores** Testing Pinia stores, not started](https://vuejs.school/learn/testing/testing-pinia-stores) 5. [Lesson 05**Testing Library and browser mode** Testing Library and browser mode, not started](https://vuejs.school/learn/testing/testing-library-and-browser-mode) 6. [Lesson 06**Testing Nuxt apps** Testing Nuxt apps, not started](https://vuejs.school/learn/testing/testing-nuxt-apps) 7. [Lesson 07**End-to-end tests with Playwright** End-to-end tests with Playwright, not started](https://vuejs.school/learn/testing/end-to-end-tests-with-playwright) [Open track](https://vuejs.school/track/testing) ### **Multiplatform** 0 of 5 1. [Lesson 01**Installable web apps (PWA)** Installable web apps (PWA), starting point, not started](https://vuejs.school/learn/multiplatform/installable-web-apps-pwa) 2. [Lesson 02**Mobile apps with Capacitor** Mobile apps with Capacitor, not started](https://vuejs.school/learn/multiplatform/mobile-apps-with-capacitor) 3. [Lesson 03**Mobile UI with Ionic Vue** Mobile UI with Ionic Vue, not started](https://vuejs.school/learn/multiplatform/mobile-ui-with-ionic-vue) 4. [Lesson 04**Desktop apps with Tauri** Desktop apps with Tauri, not started](https://vuejs.school/learn/multiplatform/desktop-apps-with-tauri) 5. [Lesson 05**Tauri plugins, mobile and updates** Tauri plugins, mobile and updates, not started](https://vuejs.school/learn/multiplatform/tauri-plugins-and-mobile) [Open track](https://vuejs.school/track/multiplatform) ## **Branches from Events and v-model** Beginner 8 · TypeScript and Routing ### **TypeScript** 0 of 4 1. [Lesson 01**Type checking and editor setup** Type checking and editor setup, starting point, not started](https://vuejs.school/learn/typescript/type-checking-and-editor-setup) 2. [Lesson 02**Typing props, emits and models** Typing props, emits and models, not started](https://vuejs.school/learn/typescript/typing-props-emits-and-models) 3. [Lesson 03**Typing refs, computed and inject** Typing refs, computed and inject, not started](https://vuejs.school/learn/typescript/typing-refs-computed-and-inject) 4. [Lesson 04**Generic components, slots and expose** Generic components, slots and expose, not started](https://vuejs.school/learn/typescript/generic-components-and-slots) [Open track](https://vuejs.school/track/typescript) ### **Routing** 0 of 5 1. [Lesson 01**Your first router** Your first router, starting point, not started](https://vuejs.school/learn/routing/your-first-router) 2. [Lesson 02**Dynamic routes and params** Dynamic routes and params, not started](https://vuejs.school/learn/routing/dynamic-routes-and-params) 3. [Lesson 03**Nested routes and layouts** Nested routes and layouts, not started](https://vuejs.school/learn/routing/nested-routes-and-layouts) 4. [Lesson 04**Navigation guards** Navigation guards, not started](https://vuejs.school/learn/routing/navigation-guards) 5. [Lesson 05**File-based routing with Vue Router 5** File-based routing with Vue Router 5, not started](https://vuejs.school/learn/routing/file-based-routing-with-vue-router-5) [Open track](https://vuejs.school/track/routing) ## **Branches from Lifecycle and template refs** Beginner 10 · Security & OWASP and AI & LLMs ### **Security & OWASP** 0 of 7 1. [Lesson 01**The OWASP Top 10, for Vue developers** The OWASP Top 10, for Vue developers, starting point, not started](https://vuejs.school/learn/security/the-owasp-top-10-for-vue-developers) 2. [Lesson 02**Authentication, sessions and CSRF** Authentication, sessions and CSRF, not started](https://vuejs.school/learn/security/authentication-and-session-failures) 3. [Lesson 03**Broken access control and SSRF** Broken access control and SSRF, not started](https://vuejs.school/learn/security/broken-access-control) 4. [Lesson 04**Injection and cross-site scripting** Injection and cross-site scripting, not started](https://vuejs.school/learn/security/injection-and-cross-site-scripting) 5. [Lesson 05**Security misconfiguration, headers and CSP** Security misconfiguration, headers and CSP, not started](https://vuejs.school/learn/security/security-headers-and-csp) 6. [Lesson 06**Supply chain and integrity** Supply chain and integrity, not started](https://vuejs.school/learn/security/supply-chain-and-integrity) 7. [Lesson 07**API security, errors and logging** API security, errors and logging, not started](https://vuejs.school/learn/security/api-security-error-handling-and-ai) [Open track](https://vuejs.school/track/security) ### **AI & LLMs** 0 of 10 1. [Lesson 01**AI for Vue developers: the map** AI for Vue developers: the map, starting point, not started](https://vuejs.school/learn/ai/ai-for-vue-developers-the-map) 2. [Lesson 02**Streaming AI responses** Streaming AI responses, not started](https://vuejs.school/learn/ai/streaming-ai-responses) 3. [Lesson 03**Tools and structured output with the AI SDK** Tools and structured output with the AI SDK, not started](https://vuejs.school/learn/ai/tools-and-structured-output-with-the-ai-sdk) 4. [Lesson 04**Retrieval: a chatbot that knows your docs** Retrieval: a chatbot that knows your docs, not started](https://vuejs.school/learn/ai/retrieval-a-chatbot-that-knows-your-docs) 5. [Lesson 05**Securing and testing AI features** Securing and testing AI features, not started](https://vuejs.school/learn/ai/securing-and-testing-ai-features) 6. [Lesson 06**Chrome's built-in AI APIs** Chrome's built-in AI APIs, not started](https://vuejs.school/learn/ai/chromes-built-in-ai-apis) 7. [Lesson 07**Models in the browser: WebLLM and Transformers.js** Models in the browser: WebLLM and Transformers.js, not started](https://vuejs.school/learn/ai/models-in-the-browser-webllm-and-transformers-js) 8. [Lesson 08**WebMCP: let agents use your app** WebMCP: let agents use your app, not started](https://vuejs.school/learn/ai/webmcp-let-agents-use-your-app) 9. [Lesson 09**llms.txt: make your site readable by models** llms.txt: make your site readable by models, not started](https://vuejs.school/learn/ai/llms-txt-make-your-site-readable-by-models) 10. [Lesson 10**MCP servers and AI-assisted development** MCP servers and AI-assisted development, not started](https://vuejs.school/learn/ai/mcp-servers-and-ai-assisted-development) [Open track](https://vuejs.school/track/ai) ## **Branches from Watchers** Beginner 11 · Data & APIs and Graphics & 3D ### **Data & APIs** 0 of 5 1. [Lesson 01**Fetching data in a component** Fetching data in a component, starting point, not started](https://vuejs.school/learn/data/fetching-data-in-a-component) 2. [Lesson 02**A reusable fetch composable** A reusable fetch composable, not started](https://vuejs.school/learn/data/a-reusable-usefetch-composable) 3. [Lesson 03**Query libraries, TanStack Query and Pinia Colada** Query libraries, TanStack Query and Pinia Colada, not started](https://vuejs.school/learn/data/query-libraries-tanstack-and-pinia-colada) 4. [Lesson 04**Mutations, optimistic updates and pagination** Mutations, optimistic updates and pagination, not started](https://vuejs.school/learn/data/mutations-optimistic-updates-and-pagination) 5. [Lesson 05**Real-time with WebSockets and SSE** Real-time with WebSockets and SSE, not started](https://vuejs.school/learn/data/real-time-with-websockets-and-sse) [Open track](https://vuejs.school/track/data) ### **Graphics & 3D** 0 of 3 1. [Lesson 01**Reactive SVG charts** Reactive SVG charts, starting point, not started](https://vuejs.school/learn/graphics/reactive-svg-charts) 2. [Lesson 02**Canvas and animation loops** Canvas and animation loops, not started](https://vuejs.school/learn/graphics/canvas-and-animation-loops) 3. [Lesson 03**3D scenes with TresJS** 3D scenes with TresJS, not started](https://vuejs.school/learn/graphics/3d-scenes-with-tresjs) [Open track](https://vuejs.school/track/graphics) ```json {"@context":"https://schema.org","@graph":[{"@id":"https://vuejs.school/#website","@type":"WebSite","description":"A free AI-instructed school for Vue.js. Short tutorials, runnable code and quizzes that adapt to you.","name":"vuejs.school","url":"https://vuejs.school/","publisher":{"@id":"https://vuejs.school/#identity"}},{"@id":"https://vuejs.school/track#webpage","description":"110 lessons in 17 tracks. Beginner is the trunk; every other track grows from one of its lessons.","name":"Skill tree","url":"https://vuejs.school/track","@type":["WebPage","CollectionPage"],"isPartOf":{"@id":"https://vuejs.school/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://vuejs.school/track"]}],"primaryImageOfPage":{"@id":"https://vuejs.school/#logo"}},{"@id":"https://vuejs.school/#identity","@type":"Organization","description":"A free AI-instructed school for Vue.js. Short tutorials, runnable code and quizzes that adapt to you.","name":"vuejs.school","url":"https://vuejs.school","logo":{"@id":"https://vuejs.school/#logo"}},{"@id":"https://vuejs.school/#logo","@type":"ImageObject","caption":"vuejs.school","contentUrl":"https://vuejs.school/apple-touch-icon.png","inLanguage":"en","url":"https://vuejs.school/apple-touch-icon.png"}]} ```