---
title: "A Vue learning plan for 2026 · vuejs.school"
description: "A twelve-week plan from zero and a six-week plan for React and Angular developers, with a goal, a thing to build and a thing to skip for every week."
canonical_url: "https://vuejs.school/community/blog/a-vue-learning-plan-for-2026"
meta:
  "og:description": "A twelve-week plan from zero and a six-week plan for React and Angular developers, with a goal, a thing to build and a thing to skip for every week."
  "og:image": "https://vuejs.school/_og/d/a_~QSBWdWUgbGVhcm5pbmcgcGxhbiBmb3IgMjAyNiDCtyB2dWVqcy5zY2hvb2w%2Cc_OgCard.takumi%2Ctitle_A%2BVue%2Blearning%2Bplan%2Bfor%2B2026%2Cdescription_~QSB0d2VsdmUtd2VlayBwbGFuIGZyb20gemVybyBhbmQgYSBzaXgtd2VlayBwbGFuIGZvciBSZWFjdCBhbmQgQW5ndWxhciBkZXZlbG9wZXJzLCB3aXRoIGEgZ29hbCwgYSB0aGluZyB0byBidWlsZCBhbmQgYSB0aGluZyB0byBza2lwIGZvciBldmVyeSB3ZWVrLg%2Ceyebrow_~TGVhcm5pbmcgdGlwcyDCtyA4IG1pbiByZWFk%2Ctint_sand%2Cp_Ii9jb21tdW5pdHkvYmxvZy9hLXZ1ZS1sZWFybmluZy1wbGFuLWZvci0yMDI2Ig%2Cs_00idYTn49W6S5o_8.png"
  "og:image:alt": "A Vue learning plan for 2026 · vuejs.school"
  "og:image:height": "600"
  "og:image:type": image/png
  "og:image:width": "1200"
  "og:title": "A Vue learning plan for 2026 · vuejs.school"
  "twitter:image": "https://vuejs.school/_og/d/a_~QSBWdWUgbGVhcm5pbmcgcGxhbiBmb3IgMjAyNiDCtyB2dWVqcy5zY2hvb2w%2Cc_OgCard.takumi%2Ctitle_A%2BVue%2Blearning%2Bplan%2Bfor%2B2026%2Cdescription_~QSB0d2VsdmUtd2VlayBwbGFuIGZyb20gemVybyBhbmQgYSBzaXgtd2VlayBwbGFuIGZvciBSZWFjdCBhbmQgQW5ndWxhciBkZXZlbG9wZXJzLCB3aXRoIGEgZ29hbCwgYSB0aGluZyB0byBidWlsZCBhbmQgYSB0aGluZyB0byBza2lwIGZvciBldmVyeSB3ZWVrLg%2Ceyebrow_~TGVhcm5pbmcgdGlwcyDCtyA4IG1pbiByZWFk%2Ctint_sand%2Cp_Ii9jb21tdW5pdHkvYmxvZy9hLXZ1ZS1sZWFybmluZy1wbGFuLWZvci0yMDI2Ig%2Cs_00idYTn49W6S5o_8.png"
  "twitter:image:alt": "A Vue learning plan for 2026 · vuejs.school"
---

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

## Learn Vue in this order

1. **Fundamentals:** templates, `ref()`, components, props and events, `computed()`, watchers and the lifecycle.
2. **A router and a store**, because that is the point where a set of components becomes an app.
3. **Nuxt**, which gives you pages, data fetching and a server in one install.
4. **Testing.**
5. **Specialisms** such as advanced TypeScript, form libraries, animation, charts and internationalisation, each when a project asks for it and not before.

Two placements need a defence. Nuxt comes after Vue Router because Nuxt's `app/pages/` folder is a router you never configure, and you should have configured one by hand once. Testing comes after Nuxt because a test of code you do not yet understand teaches you little; by week nine you can write a component without thinking, and that is when a test earns its keep.

TypeScript is a special case. Use it from day one: `<script setup lang="ts">` with inferred types costs nothing, and `npm create vue@latest` sets it up when you select it. Postpone the deep end (generics and declaration files) until week eleven, when you have real code to type.

## Twelve weeks from zero

Zero here means new to Vue. The plan assumes basic HTML, CSS and JavaScript, as the [Vue guide](https://vuejs.org/guide/introduction.html) does. You also need Node.js installed: the [quick start](https://vuejs.org/guide/quick-start.html) asks for 20.19, or 22.12 or later.

Create one project in week one and add every new idea to it. In week eight you rebuild it in Nuxt, and from then on you work in the Nuxt version.

```
npm create vue@latest my-first-app
```

When it asks which features to include, select TypeScript, Router and Pinia (space selects, Enter confirms), leave Vitest and End-to-End Testing unselected, and keep the defaults for the questions after that. Tests come in week nine, once there is something to test.

1. **Week 1.** Goal: a component shows your data and reacts to a click. Learn `ref()`, `{{ }}`, `v-if`, `v-for`, `@click` and `v-model` on an input. Build a counter, then a list you can add to. Skip anything with the word "advanced" in its title.
2. **Week 2.** Goal: split a page into components. Props carry data down, emitted events carry actions up. Build a shopping list with a `ListItem` component and a remove button that tells the parent what to remove. Skip slots and `provide`/ `inject`; they come in week ten.
3. **Week 3.** Goal: derived state. Learn `computed()` for values that follow from other values, `watch()` for side effects, and `onMounted()`. Build a search box that filters the list and a total that updates itself. Skip the flush-timing options on watchers.
4. **Week 4.** Goal: forms. Learn `v-model` on inputs of every type, and `defineModel()` to put `v-model` on your own component. Build an "add item" form with validation written by hand and an error message under each field. Skip form libraries. A light week, so your reviews catch up.
5. **Week 5.** Goal: fetch data properly. Loading, error and empty states, `fetch()` in `onMounted()`, then the same code moved into a composable. Build a page that lists data from a public API. Skip data-fetching libraries until you have felt the problem they solve.
6. **Week 6.** Goal: Vue Router. Pages, `<RouterLink>`, route params and one nested route. Build a list page and a detail page for your items. Skip navigation guards beyond a single redirect for a missing item.
7. **Week 7.** Goal: Pinia. One setup store, state shared between two pages, `storeToRefs()` for the state and plain destructuring for the actions. Build a favourites store that the list and the detail page both use. Skip persistence and plugins.
8. **Week 8.** Goal: Nuxt 4.2. Create a project with `npm create nuxt@latest`, put pages in `app/pages/`, fetch with `useFetch()`, and write one server route in `server/api/`. Rebuild weeks six and seven in Nuxt. Skip deployment presets and hybrid rendering. Another light week.
9. **Week 9.** Goal: tests. Add Vitest and Vue Test Utils to the Nuxt project with Nuxt's [testing guide](https://nuxt.com/docs/4.x/getting-started/testing), then learn `mount()`, `find()`, `trigger()` and `emitted()`. Write tests for `ListItem` and for the favourites store. Skip end-to-end tests.
10. **Week 10.** Goal: the component patterns behind reusable UI. Slots, `provide`/ `inject`, `<Teleport>` and `<Transition>`. Build a modal and a tabs component. Skip render functions and custom directives.
11. **Week 11.** Goal: TypeScript in earnest. Type every prop and emit, type the API response, type the store, and remove every `any`. Build nothing new; make what you have strict. Skip generic components unless you need one.
12. **Week 12.** Goal: ship. Run `npm run generate` (it runs `nuxt generate`), put the `.output/public` folder it makes on a static host, write a README that says how to run it, and spend the rest of the week clearing every review that is due. Skip performance work until you have measured a problem.

## Six weeks for React or Angular developers

You already know what a component is, what state is and why a router exists. What you are learning is Vue's spelling of each idea, and the few places where the idea itself is different.

1. **Week 1.** Syntax and reactivity. `ref()` where you had `useState()` or a class field, a template where you had JSX, and the rule that trips most people up: a `ref` is read and written through `.value` in the script and without it in the template. Start a project with `npm create vue@latest` as above, and build the counter and the shopping list in two evenings. Skip the Options API: read it in older code, do not write it.
2. **Week 2.** Components. Props and emits replace props and callbacks, slots replace `children` and content projection, `v-model` replaces a controlled input. `computed()` replaces `useMemo()` and any `useEffect()` that only kept derived state in sync; real side effects (fetching, timers) go in `watch()` or `onMounted()`. Build the form and the filtered list. Skip `watchEffect()` for now: `watch()` names what it reacts to, which keeps the dependencies easy to see.
3. **Week 3.** Router and store. Vue Router will feel familiar. Pinia is the bigger shift if you come from Redux or NgRx: no reducers, no dispatch, a store is a composable with state, computed values and functions. Build list, detail and favourites. Skip persistence.
4. **Week 4.** Nuxt 4.2. Pages are files, `useFetch()` runs on the server when a page first loads and sends the result down in the payload, and a file in `server/api/` is an endpoint. Rebuild week three in Nuxt. Skip layers and writing your own modules.
5. **Week 5.** Testing. Vitest reads like Jest, and `mount()` from Vue Test Utils is close to what you did with Enzyme or TestBed. Write tests for two components and the store. Skip end-to-end tests.
6. **Week 6.** TypeScript details that differ: `defineProps<{ ... }>()` with no runtime declaration, `defineEmits` with named tuples, `useTemplateRef()` for typed element access. Then ship the project as you would at work.

## What to leave until a project asks

Some topics are good and still do not belong in the first three months. Form libraries, animation libraries, charts and 3D, internationalisation, and performance tuning all make sense once you have an app that needs them.

The same goes for Vue 3.6, in beta since 23 December. Its headline feature, Vapor Mode, is a compile mode without the virtual DOM. It is opt-in, through a `vapor` attribute on `<script setup>`, and the code inside the component stays the Composition API you are learning, so nothing in this plan changes. Stable Vue is 3.5. Learn on that and read the [3.6 beta release notes](https://github.com/vuejs/core/releases/tag/v3.6.0-beta.1) when you are curious.

## Where quizzes and reviews fit in

Every lesson on the school is a short tutorial with a quiz drawn from a reviewed question bank, and many lessons run their code in the browser. Each answer schedules that question to come back later, using a spaced repetition algorithm called FSRS: sooner when you got it wrong, later each time you get it right. The plan is built around that. The light weeks (four, eight and twelve) exist so the reviews from the heavy weeks have room to come due.

Make reviews the first thing in each session, before a new lesson. They take a few minutes, and they are what keeps last week's ideas from fading. The optional AI instructor, if you turn it on, can choose which questions to show you and gives hints when you are stuck. It never writes a question, and you can leave it off.

## What to do when the plan slips

It will slip. Work gets busy, or week five's API returns something odd and eats three evenings.

After twelve weeks, or six, you will not know all of Vue. You will have one project that runs, has tests, is typed, and that you understand line by line. That is what you build the rest on.

**Was this helpful?**

## **Keep reading**

[Learning tips · 6 min read**Why your quiz brings old questions back**](https://vuejs.school/community/blog/why-your-quiz-brings-old-questions-back) [Learning tips · 7 min read**Finished a track? Here is how to keep the knowledge**](https://vuejs.school/community/blog/finished-a-track-how-to-keep-the-knowledge)

```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/community/blog/a-vue-learning-plan-for-2026#webpage","@type":"WebPage","dateModified":"2026-10-27T19:31:40.253Z","datePublished":"2026-01-01","description":"A twelve-week plan from zero and a six-week plan for React and Angular developers, with a goal, a thing to build and a thing to skip for every week.","name":"A Vue learning plan for 2026","url":"https://vuejs.school/community/blog/a-vue-learning-plan-for-2026","breadcrumb":{"@id":"https://vuejs.school/community/blog/a-vue-learning-plan-for-2026#breadcrumb"},"isPartOf":{"@id":"https://vuejs.school/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://vuejs.school/community/blog/a-vue-learning-plan-for-2026"]}],"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/community/blog/a-vue-learning-plan-for-2026#article","dateModified":"2026-10-27T19:31:40.253Z","datePublished":"2026-01-01","description":"A twelve-week plan from zero and a six-week plan for React and Angular developers, with a goal, a thing to build and a thing to skip for every week.","headline":"A Vue learning plan for 2026","inLanguage":"en","isAccessibleForFree":true,"thumbnailUrl":"https://vuejs.school/_og/d/a_~QSBWdWUgbGVhcm5pbmcgcGxhbiBmb3IgMjAyNiDCtyB2dWVqcy5zY2hvb2w%2Cc_OgCard.takumi%2Ctitle_A%2BVue%2Blearning%2Bplan%2Bfor%2B2026%2Cdescription_~QSB0d2VsdmUtd2VlayBwbGFuIGZyb20gemVybyBhbmQgYSBzaXgtd2VlayBwbGFuIGZvciBSZWFjdCBhbmQgQW5ndWxhciBkZXZlbG9wZXJzLCB3aXRoIGEgZ29hbCwgYSB0aGluZyB0byBidWlsZCBhbmQgYSB0aGluZyB0byBza2lwIGZvciBldmVyeSB3ZWVrLg%2Ceyebrow_~TGVhcm5pbmcgdGlwcyDCtyA4IG1pbiByZWFk%2Ctint_sand%2Cp_Ii9jb21tdW5pdHkvYmxvZy9hLXZ1ZS1sZWFybmluZy1wbGFuLWZvci0yMDI2Ig%2Cs_00idYTn49W6S5o_8.png","@type":["Article","BlogPosting"],"articleSection":["Learning tips"],"author":{"@id":"https://vuejs.school/#identity"},"image":{"@id":"https://vuejs.school/#/schema/image/1"},"isPartOf":{"@id":"https://vuejs.school/community/blog/a-vue-learning-plan-for-2026#webpage"},"mainEntityOfPage":{"@id":"https://vuejs.school/community/blog/a-vue-learning-plan-for-2026#webpage"},"publisher":{"@id":"https://vuejs.school/#identity"}},{"@id":"https://vuejs.school/community/blog/a-vue-learning-plan-for-2026#breadcrumb","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"Blog","item":"https://vuejs.school/community/blog","position":1},{"@type":"ListItem","name":"A Vue learning plan for 2026","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"},{"@id":"https://vuejs.school/#/schema/image/1","@type":"ImageObject","contentUrl":"https://vuejs.school/_og/d/a_~QSBWdWUgbGVhcm5pbmcgcGxhbiBmb3IgMjAyNiDCtyB2dWVqcy5zY2hvb2w%2Cc_OgCard.takumi%2Ctitle_A%2BVue%2Blearning%2Bplan%2Bfor%2B2026%2Cdescription_~QSB0d2VsdmUtd2VlayBwbGFuIGZyb20gemVybyBhbmQgYSBzaXgtd2VlayBwbGFuIGZvciBSZWFjdCBhbmQgQW5ndWxhciBkZXZlbG9wZXJzLCB3aXRoIGEgZ29hbCwgYSB0aGluZyB0byBidWlsZCBhbmQgYSB0aGluZyB0byBza2lwIGZvciBldmVyeSB3ZWVrLg%2Ceyebrow_~TGVhcm5pbmcgdGlwcyDCtyA4IG1pbiByZWFk%2Ctint_sand%2Cp_Ii9jb21tdW5pdHkvYmxvZy9hLXZ1ZS1sZWFybmluZy1wbGFuLWZvci0yMDI2Ig%2Cs_00idYTn49W6S5o_8.png","inLanguage":"en","url":"https://vuejs.school/_og/d/a_~QSBWdWUgbGVhcm5pbmcgcGxhbiBmb3IgMjAyNiDCtyB2dWVqcy5zY2hvb2w%2Cc_OgCard.takumi%2Ctitle_A%2BVue%2Blearning%2Bplan%2Bfor%2B2026%2Cdescription_~QSB0d2VsdmUtd2VlayBwbGFuIGZyb20gemVybyBhbmQgYSBzaXgtd2VlayBwbGFuIGZvciBSZWFjdCBhbmQgQW5ndWxhciBkZXZlbG9wZXJzLCB3aXRoIGEgZ29hbCwgYSB0aGluZyB0byBidWlsZCBhbmQgYSB0aGluZyB0byBza2lwIGZvciBldmVyeSB3ZWVrLg%2Ceyebrow_~TGVhcm5pbmcgdGlwcyDCtyA4IG1pbiByZWFk%2Ctint_sand%2Cp_Ii9jb21tdW5pdHkvYmxvZy9hLXZ1ZS1sZWFybmluZy1wbGFuLWZvci0yMDI2Ig%2Cs_00idYTn49W6S5o_8.png"}]}
```