Vue.js Roadmap

A step-by-step Vue.js roadmap: what to learn in order, the related skills and the best places to learn each step.

The stack, end to end

  • Frontend: JavaScript, DOM and events, Promises and async/await, ES modules, Fetch API, Vue.js, Reactivity, Composition API, Vue Router, Pinia
  • Backend: REST API design, JSON, HTTP methods and status codes, API documentation
  • Testing: Unit testing, Component testing, End-to-end testing

  1. JavaScript

    Suggested pace: Start here

    JavaScript makes pages interactive and also runs on servers. Learn the language properly: types, functions, scope, objects and arrays, the DOM, events, promises and async/await, and modules.

    Skills

    • JavaScript
    • DOM and events
    • Promises and async/await
    • ES modules
    • Fetch API

    Tips

    • Build small things (a to-do list, a quiz, a weather widget) before jumping to a framework.

    Where to learn

  2. Vue.js

    Suggested pace: Next

    Vue is a gentle, progressive framework. Learn templates, reactivity, components, the Composition API, routing and state with Pinia.

    Skills

    • Vue.js
    • Reactivity
    • Composition API
    • Vue Router
    • Pinia

    Tips

    • Start with the official interactive tutorial, then build a small app of your own.

    Where to learn

  3. REST APIs

    Suggested pace: Then

    An API lets a frontend, a phone app or another system talk to your backend. Learn resources and HTTP methods, status codes, pagination, versioning and how to document an API. Add GraphQL later if you need it.

    Skills

    • REST API design
    • JSON
    • HTTP methods and status codes
    • API documentation

    Tips

    • Test every endpoint with a tool such as Postman before building a frontend on it.

    Where to learn

  4. Testing frontend code

    Suggested pace: After that

    Write tests so changes do not break things: unit tests for functions and components, and a few end-to-end tests of the main user journeys.

    Skills

    • Unit testing
    • Component testing
    • End-to-end testing

    Tips

    • Test behaviour a user would notice, not internal details.

    Where to learn

Frequently asked questions

Where should I start with Vue.js?

Start at step 1 and work down in order, because later steps build on earlier ones. If you are signed in, the roadmap compares your resume with each step and marks where you could start.

Is Vue.js worth learning?

Check how many job adverts in your area mention Vue.js, and whether it fits the kind of work you want. This roadmap shows what to learn; the Browse jobs page shows what employers are asking for.

How do I know I am ready to apply?

When you can build a small project from start to finish without copying a tutorial, and explain why you made your choices. Apply while you keep learning; you do not need to know everything.