Learning Vue in 20 minutes a day

Most people who want to learn Vue do not have a free afternoon. They have a train ride, a lunch break, or the twenty minutes after the dishes are done. That is fine. Twenty focused minutes a day will get you further than a four-hour session on Saturday. Spend them on one lesson, one small change to its code, the quiz, and then the reviews that are due.

Why short daily sessions beat a weekend marathon

Memory has a quirk that researchers call the spacing effect: you remember something for longer when you meet it several times with gaps in between, rather than many times in one sitting. A Saturday marathon feels productive, but by Wednesday most of it has faded, because nothing made you recall it in between.

Daily sessions fix that. Each day you return to Vue, you pull yesterday's idea out of memory again, and recalling an idea strengthens it more than rereading it does.

The reviews in the school put both ideas to work. Every quiz question you answer is scheduled to come back after a gap, chosen by a spaced repetition algorithm called FSRS. Each time you get the question right, the gap grows.

There is a second, less scientific reason. Twenty minutes is small enough that you will actually do it. A plan that needs a free evening gets skipped the first busy week and never restarts.

The routine, minute by minute

Here is a session that fits in twenty minutes. The order matters: new material first, while you are fresh, then the quiz, then reviews, which take the least energy.

1. Minutes 0 to 2: open your next lesson, the first one you have not done. Do not browse.
2. Minutes 2 to 8: read it and run the example. Read the code first, guess what it will show, then run it and check your guess. Many lessons run their code in the browser; a lesson whose code needs a real project tells you what to try there instead.
3. Minutes 8 to 13: change one thing in the example (next section).
4. Minutes 13 to 16: take the quiz. Answer from memory, without going back to the lesson text.
5. Minutes 16 to 20: do the reviews that are due. If none are due, stop early.

Set a timer. When it rings, stop, even mid-sentence. Stopping while you still want more is what makes you come back tomorrow.

Change one thing and predict the result

Reading code is not the same as writing it. The gap between the two is where many learners get stuck, and the cheapest way across is to change one line of the example and predict what will happen before you run it.

Take the counter that appears early on in most Vue teaching:

<script setup lang="ts">
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <button @click="count++">Clicked {{ count }} times</button>
</template>

Good single changes, each about a minute's work:

• Start count at 10 instead of 0.
• Make the button count down.
• Add a second button that resets count to zero.
• Rename count to clicks in the template only, and read the warning Vue prints.

Each one teaches you one thing about how the script and the template connect.

One change, not five. If you change five things and the example breaks, you do not know which change broke it, and the five minutes you had are gone.

What to do when you get stuck

You will get stuck. It usually happens during the "change one thing" step, and it is the most useful part of the session if you handle it in this order:

1. Read the error or warning, all of it. Vue's warnings in the browser console are written in full sentences and often say exactly what to do. A warning such as [Vue warn]: Property "clicks" was accessed during render but is not defined on instance. tells you the template is asking for a name the script never declared.
2. Go back to what worked. Put the line back the way it was and confirm the example works again. Then make a smaller change. Narrowing the problem down is a skill in itself, and it transfers to every bug you will meet.
3. Read the docs for the feature you are using. The guide at vuejs.org is organised by feature, and many of its examples have a "Try it in the Playground" link that runs them. Two minutes there usually beats ten minutes of guessing.
4. Then ask. Ask a colleague, ask in the Vue Discord, or, if you turned it on, ask the optional instructor in the lesson. It gives hints rather than answers, which is the right amount of help when the goal is to learn.

If you reach the end of your twenty minutes still stuck, stop anyway. Write down the question in one sentence. Tomorrow, with fresh eyes, it often answers itself.

Keep a tiny project beside the lessons

Lessons teach one idea at a time. A project forces you to combine them, and that is where understanding becomes ability. The trick is to keep the project tiny, so it never competes with the daily session.

Pick something you would use. A shopping list. A reading log. A timer for your tea. Create it once with npm create vue@latest, which sets up a Vue 3.5 project with Vite, and put it somewhere you will find it again.

Then add one feature a week, using the ideas from that week's lessons. Once you have met ref(), your shopping list gets an input and a list. Once you have met props, the list items become a component. Once you have met events, each item gets a Remove button that asks the parent to remove it:

<script setup lang="ts">
defineProps<{ text: string }>()
const emit = defineEmits<{ remove: [] }>()
</script>

<template>
  <li>
    {{ text }}
    <button @click="emit('remove')">Remove</button>
  </li>
</template>

remove: [] declares a remove event that carries no arguments. It does not need to say which item: the parent listens on each item separately, for example with @remove="items.splice(index, 1)" on a ListItem rendered by v-for="(item, index) in items".

Spend ten minutes on it at the weekend, or swap the "change one thing" step for the project twice a week. It does not need to be finished. It needs to exist, so that every new idea has somewhere to go.

Keep going through missed days and bad days

You will miss days. When you do, do not try to catch up by taking two lessons in one session.

Some days the twenty minutes feel wasted. The example did not work, the quiz went badly, nothing clicked. Those days count. A wrong quiz answer schedules that question to come back sooner, which is the system working as designed, and the reviews that follow in the next few days are where the idea finally lands.

What you should notice after a month is not that you know all of Vue. You will not. What changes is that you can open a Vue file, read it, and change it with some confidence, and that the ideas from three weeks ago are still there when you need them.