Skip to content

Exercises

These exercises are intended for programmers new to Vue to practice their skills. You should read through the official Vue documentation first. Keep the documentation open while working on these exercises, as you'll likely need to look things up as you go.

The exercises don't have exact requirements. You can choose how far you want to take a particular exercise and what features to add.

No scaffolding or boilerplate code is provided to help you out. Each exercise is a self-contained project, and you have to create it from scratch. If you're new to web development, or programming in general, you may find these exercises too difficult. But that doesn't mean you shouldn't give them a go.

It is possible to attempt the exercises directly in the SFC Playground. However, if you're new to Vue then you'd be better off using a proper IDE to help you avoid basic errors. Using npm init vue@latest to create a starter project should work well for the exercises given here.

Each exercise includes a reference solution, but you should attempt to write your own version before consulting the example code. You won't get as much out of it if you haven't tried it for yourself.

If you'd rather just look at some examples, take a look at the official examples instead, and save these exercises for another time.

If a particular exercise feels too difficult, try breaking it down into smaller steps. Implement one small part of it. You don't need to have the entire application mapped out in your head before you start, you can move incrementally towards it and rewrite sections of the code as you improve your understanding of the problem.