JobRoadmaps
Vue

Frontend Framework

·View all resources →

Vue Learning Roadmap

Vue.js is a progressive JavaScript framework for building user interfaces — approachable, versatile, and performant. It's the dominant frontend framework in Europe and Asia, widely used at Alibaba, GitLab, Adobe, and Xiaomi. Vue's gentle learning curve makes it the most beginner-friendly of the major frameworks, while its Composition API scales to enterprise complexity.

Total time

3–5 months

Stages

5 stages

Job-ready at

Stage 3

Career paths

2 paths

1
2
3
4
5

Before you start — Prerequisites

✓

HTML and CSS

Vue builds on HTML templates and CSS — solid fundamentals are essential.

✓
JavaScript fundamentals

Vue is a JavaScript framework — you need variables, functions, arrays, objects, and async/await.

1

Stage 1: Vue Basics

Templates, reactivity, and components

2–3 weeks

Topics to cover

Creating a Vue app with ViteTemplate syntax: {{ }}, v-bind, v-onReactive data with ref() and reactive()Computed propertiesv-if, v-else, v-show — conditional renderingv-for — list renderingEvent handling: @click, @submitv-model: two-way data bindingComponent basics: props and emitsSingle File Components (SFC) — .vue files

Bold = especially important

Milestone

You build interactive Vue components — reactive forms, lists, conditional UI — and understand the SFC structure.

Project to build

Interactive quiz app

Multiple-choice questions, score tracking, show/hide answers with v-if, loop questions with v-for — single-file components.

2

Stage 2: Composition API & Lifecycle

Modern Vue — <script setup>

2–3 weeks

Topics to cover

<script setup> — the modern wayref() vs reactive() — when to use eachwatch() and watchEffect()Lifecycle hooks: onMounted, onUnmountedComposables: reusable logic functionsdefineProps and defineEmitsprovide / inject for deep prop passingTemplate refs with useTemplateRef()Slots: default and named slotsAsync components and Suspense

Bold = especially important

Milestone

You write Vue 3 with <script setup>, extract reusable logic into composables, and understand the component lifecycle.

Project to build

Reusable data-fetching composable

useFetch() composable with loading/error/data states, used in multiple components — demonstrates the composable pattern.

3

Stage 3: Vue Router & State

✓ Min. Job Ready

Multi-page apps with navigation and shared state

2–3 weeks

Topics to cover

Vue Router: routes, RouterView, RouterLinkDynamic routes: /users/:idNavigation guards: beforeEach for authuseRoute and useRouter composablesNested routes for layoutsPinia store: defineStore, state, getters, actionsUsing Pinia across componentsPersisting Pinia state (localStorage)Devtools for Pinia and Router debuggingLazy-loaded route components

Bold = especially important

Milestone

You build a multi-page Vue app with protected routes (auth guard), shared state in Pinia, and client-side navigation.

Project to build

Expense tracker app

Multiple pages (dashboard, add expense, categories), Pinia for shared expense state, route guard for a "settings" page.

4

Stage 4: API Integration & TypeScript

Connect to real backends, type everything

2–3 weeks

Topics to cover

<script setup lang="ts"> — typed componentsTyping props with defineProps<{}>()Axios or fetch for API callsError handling and loading statesOptimistic UI updatesForm handling and validation (VeeValidate + Zod)Environment variables with import.meta.envAPI abstraction layer (services folder)Handling 401/403 globally with interceptorsTanStack Query for server state

Bold = especially important

Milestone

Your Vue app is fully TypeScript, fetches real data from a backend API, and handles loading/error states gracefully.

Project to build

GitHub user search app

TypeScript Vue 3, GitHub REST API, Pinia for search state, typed API responses, loading skeletons and error states.

5

Stage 5: Testing & Deployment

Ship production Vue apps

2–3 weeks

Topics to cover

Vitest for unit and component testingVue Test Utils: mount, shallowMountTesting composables in isolationPlaywright for end-to-end testsGitHub Actions: lint, test, buildDeploy to Vercel, Netlify, or Cloudflare PagesPerformance: lazy loading, code splittingLighthouse and Core Web VitalsSSR with Nuxt.jsStatic site generation with Nuxt or VitePress

Bold = especially important

Milestone

Your Vue app is tested, CI-checked, and deployed. You understand the difference between SPA, SSR, and static generation and when to use each.

Project to build

Tested and deployed portfolio

Vitest component tests, Playwright E2E for key flows, GitHub Actions CI, deployed to Vercel — public portfolio showcasing your work.

What to learn next with Vue

Skills that pair directly with Vue in job postings

TypeScript

Vue 3 + TypeScript is the modern standard — <script setup lang="ts">

Node.js

Build the backend API that your Vue frontend calls

SQL

Full-stack Vue apps need a database — SQL is universal

Git

Version control and collaboration — required for every team

Docker

Deploy Vue apps in containers for consistent environments

Career paths that use Vue

Frontend DeveloperFull Stack Developer

Frequently asked questions

Vue vs React — which should I learn?

React has more US job listings and a larger ecosystem. Vue is bigger in Europe, Asia, and among developers who prefer a cleaner template syntax. Vue 3 with the Composition API is just as powerful as React hooks. If you want maximum US job opportunities, learn React. If you prefer a gentler learning curve or work with European companies, Vue is excellent.

What is the difference between Options API and Composition API?

Options API (Vue 2 style) organises code by option type (data, methods, computed, watch) — easier for beginners. Composition API (Vue 3) organises code by logical concern using setup() or <script setup> — more flexible and better for large, complex components. New projects should use the Composition API with <script setup>.

What is Nuxt.js and should I learn it?

Nuxt is to Vue what Next.js is to React — it adds server-side rendering, file-based routing, and static site generation. For SEO-critical apps or full-stack Vue development, learn Vue first, then Nuxt. Most Vue job postings mention Nuxt as a nice-to-have.

Is Vue.js dying?

No — Vue has a strong community, regular releases, and growing adoption in Asia and Europe. Vue 3 is a mature, modern framework. The narrative that 'Vue is losing to React' ignores massive adoption outside the US tech bubble. Vue is a safe, actively maintained choice.

Do I need to learn Vuex or Pinia for state management?

Pinia — it's the official Vue state management library as of Vue 3 and replaces Vuex. Pinia has a simpler API, full TypeScript support, and excellent DevTools integration. You can skip Vuex entirely unless you're maintaining a legacy Vue 2 codebase.

Ready to start learning?

Browse our curated Vue resources — every course, book, and video ranked by quality.

View Vue Resources →