A Vue learning plan for 2026

If you decided over the holidays that this is the year you learn Vue, this is the plan. It comes in two lengths: twelve weeks for someone starting from zero, and six weeks for someone who already builds interfaces in React or Angular and wants to move across. Every week has a goal, something to build, and something to leave alone for now. The versions are the ones current today: Vue 3.5, Vite as the build tool, Pinia 3 for shared state, Vue Router 4, and Nuxt 4.2 with its app/ directory.

Follow the weeks in order. The order is the real advice here; the rest is detail.

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 does. You also need Node.js installed: the quick start 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, 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 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.