---
title: "Games · vuejs.school"
description: "Learn Vue by playing: a lifecycle ordering puzzle, a reactivity prediction game and a bug hunt."
canonical_url: "https://vuejs.school/games"
meta:
  "og:description": "Learn Vue by playing: a lifecycle ordering puzzle, a reactivity prediction game and a bug hunt."
  "og:image": "https://vuejs.school/_og/d/a_~TGVhcm4gVnVlIGJ5IHBsYXlpbmcgwrcgdnVlanMuc2Nob29s%2Cc_OgCard.takumi%2Ctitle_Learn%2BVue%2Bby%2Bplaying%2Cdescription_~QSBsaWZlY3ljbGUgb3JkZXJpbmcgcHV6emxlLCBhIHJlYWN0aXZpdHkgcHJlZGljdGlvbiBnYW1lIGFuZCBhIGJ1ZyBodW50Lg%2Ceyebrow_Games%2Ctint_peach%2Cp_Ii9nYW1lcyI%2Cs_4dWYfI3WE71PTAnO.png"
  "og:image:alt": "Learn Vue by playing · vuejs.school"
  "og:image:height": "600"
  "og:image:type": image/png
  "og:image:width": "1200"
  "og:title": "Games · vuejs.school"
  "twitter:image": "https://vuejs.school/_og/d/a_~TGVhcm4gVnVlIGJ5IHBsYXlpbmcgwrcgdnVlanMuc2Nob29s%2Cc_OgCard.takumi%2Ctitle_Learn%2BVue%2Bby%2Bplaying%2Cdescription_~QSBsaWZlY3ljbGUgb3JkZXJpbmcgcHV6emxlLCBhIHJlYWN0aXZpdHkgcHJlZGljdGlvbiBnYW1lIGFuZCBhIGJ1ZyBodW50Lg%2Ceyebrow_Games%2Ctint_peach%2Cp_Ii9nYW1lcyI%2Cs_4dWYfI3WE71PTAnO.png"
  "twitter:image:alt": "Learn Vue by playing · vuejs.school"
---

> Index of every page on this site: [llms.txt](https://vuejs.school/llms.txt)

# **Games**

Learn Vue by playing. Each game is built on a real Vue mechanic: the hooks fire in Vue's real order, the radar asks Vue's own reactivity, and the bugs are the ones everybody writes.

[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\<template>2\<button@click="add">3 {{ count.value }}**bug**4\</button>5\</template>**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)

```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/games#webpage","description":"Learn Vue by playing: a lifecycle ordering puzzle, a reactivity prediction game and a bug hunt.","name":"Games","url":"https://vuejs.school/games","@type":["WebPage","CollectionPage"],"isPartOf":{"@id":"https://vuejs.school/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://vuejs.school/games"]}],"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"}]}
```