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