--- title: "vuejs.school · Learn Vue with an AI instructor" description: "A free AI-instructed school for Vue.js. Short tutorials, runnable code and quizzes that adapt to you." canonical_url: "https://vuejs.school/" meta: "og:description": "A free AI-instructed school for Vue.js. Short tutorials, runnable code and quizzes that adapt to you." "og:image": "https://vuejs.school/_og/d/a_~TGVhcm4gVnVlIHdpdGggYW4gQUkgaW5zdHJ1Y3RvciDCtyB2dWVqcy5zY2hvb2w%2Cc_OgCard.takumi%2Ctitle_Learn%2BVue%2Bwith%2Ban%2BAI%2Binstructor%2Cdescription_~QSBmcmVlIEFJLWluc3RydWN0ZWQgc2Nob29sIGZvciBWdWUuanMuIFNob3J0IHR1dG9yaWFscywgcnVubmFibGUgY29kZSBhbmQgcXVpenplcyB0aGF0IGFkYXB0IHRvIHlvdS4%2Ceyebrow_~RnJlZSDCtyBBSS1pbnN0cnVjdGVkIHNjaG9vbCBmb3IgVnVlLmpz%2Ctint_mint%2Cs_08cV83nEICJsWRSM.png" "og:image:alt": "Learn Vue with an AI instructor · vuejs.school" "og:image:height": "600" "og:image:type": image/png "og:image:width": "1200" "og:title": "vuejs.school · Learn Vue with an AI instructor" "twitter:image": "https://vuejs.school/_og/d/a_~TGVhcm4gVnVlIHdpdGggYW4gQUkgaW5zdHJ1Y3RvciDCtyB2dWVqcy5zY2hvb2w%2Cc_OgCard.takumi%2Ctitle_Learn%2BVue%2Bwith%2Ban%2BAI%2Binstructor%2Cdescription_~QSBmcmVlIEFJLWluc3RydWN0ZWQgc2Nob29sIGZvciBWdWUuanMuIFNob3J0IHR1dG9yaWFscywgcnVubmFibGUgY29kZSBhbmQgcXVpenplcyB0aGF0IGFkYXB0IHRvIHlvdS4%2Ceyebrow_~RnJlZSDCtyBBSS1pbnN0cnVjdGVkIHNjaG9vbCBmb3IgVnVlLmpz%2Ctint_mint%2Cs_08cV83nEICJsWRSM.png" "twitter:image:alt": "Learn Vue with an AI instructor · vuejs.school" --- > Index of every page on this site: [llms.txt](https://vuejs.school/llms.txt) **Free, no account, saved on this device.** # **Learn Vue with an AI instructor** From your first component to Nuxt in production: 110 short lessons in 17 tracks, each with code you can run, a tutor who teaches it out loud and a quiz at the end. [**Start: Your first component**](https://vuejs.school/learn/beginner/your-first-component) [**Find my starting point**](https://vuejs.school/start) **Start here****Beginner** 1. [Lesson 01**Your first component**Your first component, starting point, up next](https://vuejs.school/learn/beginner/your-first-component) 2. [**Reactivity basics** Reactivity basics, not started](https://vuejs.school/learn/beginner/reactivity-basics) 3. [**Directives** Directives, not started](https://vuejs.school/learn/beginner/directives) 0 of 11 done [**All lessons**](https://vuejs.school/track/beginner) ## **How a lesson works** Every lesson is short and ends with a quiz. Read it, run it, watch it, or ask. [**Open a lesson**](https://vuejs.school/learn/beginner/your-first-component) 1. [App.vue1\2 Count: {{ count }}3\**Preview****Count: 3****Step 1**

**Read and run**

A short tutorial with one diagram, and its code in a playground you can edit and run.](https://vuejs.school/learn/beginner/your-first-component) 2. [**Make it reactive**const count = ref(0) So `count` is **reactive** now.**Step 2**

**Watch Leo teach it**

Leo, the 3D tutor, talks you through the lesson and types the code as he goes. Nothing loads until you press Start.](https://vuejs.school/learn/beginner/your-first-component?tab=tutor) 3. [**Question 3 of 3****What does **`ref(0)`** return?****A**A plain number**B**An object with .value**Correct****C**A promise**Step 3**

**Pass the quiz**

Three questions end each lesson, from a reviewed bank. What you miss comes back in practice until it sticks.](https://vuejs.school/practice) 4. [Why `.value` here?In script a ref is an object, so you read `count.value`. The template unwraps it for you.Ask about this lesson…**Step 4**

**Ask the instructor**

Stuck? Ask in plain words from any lesson. Use the free instructor, or your own API key.](https://vuejs.school/settings/ai) ## **Skill tree** Beginner is the trunk. 16 tracks branch off it, and every track's first lesson is a place you can start. [**See every lesson as a tree**](https://vuejs.school/track) - 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) ### **The branches** - [**Projects & tooling**6 lessons · from Beginner 1](https://vuejs.school/track/tooling) - [**Advanced Vue**11 lessons · from Beginner 2](https://vuejs.school/track/advanced) - [**Pinia**6 lessons · from Beginner 2](https://vuejs.school/track/pinia) - [**VueUse**6 lessons · from Beginner 2](https://vuejs.school/track/vueuse) - [**Styling & UI**5 lessons · from Beginner 4](https://vuejs.school/track/styling) - [**Animation**4 lessons · from Beginner 4](https://vuejs.school/track/animation) - [**Forms**4 lessons · from Beginner 6](https://vuejs.school/track/forms) - [**Nuxt**11 lessons · from Beginner 7](https://vuejs.school/track/nuxt) - [**Testing**7 lessons · from Beginner 7](https://vuejs.school/track/testing) - [**Multiplatform**5 lessons · from Beginner 7](https://vuejs.school/track/multiplatform) - [**TypeScript**4 lessons · from Beginner 8](https://vuejs.school/track/typescript) - [**Routing**5 lessons · from Beginner 8](https://vuejs.school/track/routing) - [**Security & OWASP**7 lessons · from Beginner 10](https://vuejs.school/track/security) - [**AI & LLMs**10 lessons · from Beginner 10](https://vuejs.school/track/ai) - [**Data & APIs**5 lessons · from Beginner 11](https://vuejs.school/track/data) - [**Graphics & 3D**3 lessons · from Beginner 11](https://vuejs.school/track/graphics) ## **Learn by playing** Three games built on real Vue: the hooks fire in Vue's real order, the radar asks Vue's own reactivity, and the bugs are the ones everybody writes. [**All games**](https://vuejs.school/games) - [ 1. **1****App****setup** 2. **2****App****onBeforeMount** 3. **3****App****onMounted****Ordering puzzle****Lifecycle Line-up**Put the lifecycle hooks in the order Vue fires them.0 of 7 levels done**Start playing**](https://vuejs.school/games/lifecycle) - [**Preview****1****re-rendered****+1****Prediction game****Reactivity Radar**Will the template update? Call it before Vue does.0 of 3 levels done**Start playing**](https://vuejs.school/games/radar) - [1\**Spot the bug****Bug Hunt**Find the broken line, then pick the fix.0 of 3 levels done**Start playing**](https://vuejs.school/games/bug-hunt) ## **From the community** Write-ups on what learners get stuck on, and Vue roles matched to your progress. ### **Featured from the blog** [**All posts**](https://vuejs.school/community/blog) - [**Release notes****Vue 3.6 and Vapor Mode: where things stand**Vue 3.6 is at its tenth release candidate and 3.5.43 is the stable release. What 3.6 brings, what the RCs changed, and what to do with your app now.8 Oct · 7 min read](https://vuejs.school/community/blog/vue-3-6-and-vapor-mode-where-things-stand) - [**Release notes****What's new in Nuxt 4.6: nuxt/server, typed $fetch, cookie sessions and Vapor**Nuxt 4.6 adds a portable nuxt/server import, cookie sessions, a rebuilt typed $fetch, Vapor components and Nuxt CLI v4. Here is what changes for your app.6 Oct · 7 min read](https://vuejs.school/community/blog/whats-new-in-nuxt-4-6) - [**Deep dive****VueUse 15's new composables: useWebMCP, useLiveAnnouncer and useTemporalNow**What useWebMCP, useLiveAnnouncer and useTemporalNow wrap, how to use each one safely, and when a few lines of your own code are the better choice.1 Oct · 6 min read](https://vuejs.school/community/blog/vueuse-15s-new-composables-usewebmcp-useliveannouncer-usetemporalnow) ### **Featured jobs** [**All jobs**](https://vuejs.school/community/jobs) [**Hiring Vue developers? Post a role**Sponsors post their Vue roles here, matched to what each learner has studied. Every membership includes job posts.](https://vuejs.school/sponsors) ```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/#webpage","@type":"WebPage","description":"A free AI-instructed school for Vue.js. Short tutorials, runnable code and quizzes that adapt to you.","name":"Learn Vue with an AI instructor","url":"https://vuejs.school/","about":{"@id":"https://vuejs.school/#identity"},"isPartOf":{"@id":"https://vuejs.school/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://vuejs.school/"]}],"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"}]} ```