Yes. You can start learning on Learnr for free. Learnr Pro unlocks higher daily limits and extra features.

Learn Vue

Build reactive interfaces with an approachable, progressive framework.

Free to start. Built from a single prompt. No credit card.

Vue is a progressive JavaScript framework for building user interfaces, created by Evan You. It uses single-file components, .vue files that keep a template, script and scoped styles together, and a reactivity system that updates the page automatically when data changes. Templates use directives like v-if, v-for and v-model, which feel close to plain HTML, making Vue approachable for people with HTML and CSS experience. Modern Vue 3 favors the Composition API with ref, reactive and computed. Learnr builds a personalized Vue course from your prompt and teaches it through short, interactive lessons, from a first component to a routed app.

How to learn Vue, step by step

Review modern JavaScript and HTML. Vue builds on ES modules, arrow functions, destructuring and promises, plus solid HTML and CSS. A week of review here prevents confusion between what is Vue and what is plain JavaScript.
Scaffold a project and read every file. Create an app with npm create vue@latest, which uses Vite, and run the dev server. Open main.js, App.vue and a component to see how the template, script setup and style blocks fit together.
Learn reactivity with ref and computed. Use ref for values that change and read them with .value in script but not in templates. Derive values with computed instead of storing duplicates, and use watch only for side effects.
Practice directives on small widgets. Build a to-do list with v-for and a key, toggles with v-if and v-show, form inputs with v-model and classes with :class. These directives cover most template work.
Compose components with props and emits. Split a page into components, pass data down with defineProps and send events up with defineEmits. Use slots to make flexible layout components like cards and modals.
Build a routed app with shared state. Add Vue Router for pages and Pinia for state shared across them, then fetch data from a public API. Daily Learnr lessons keep reactivity rules clear as the app grows.

What you'll learn

Build single-file components with templates, scripts and scoped styles
Manage reactive state with ref, reactive, computed and watch
Render lists and conditions with v-for, v-if and v-bind
Pass data with props and emit events between components
Add routing with Vue Router and shared state with Pinia

What's inside your Vue course

A sample path Learnr builds for Vue. Your real course adapts to your goal and level.

1. How Vue works and creating a project with Vite
2. Templates, directives and binding
3. Reactivity with the Composition API
4. Components, props, events and slots
5. Forms, v-model and fetching data
6. Vue Router, Pinia and building a complete app

How long does it take to learn Vue?

With good JavaScript skills, the core of Vue takes 2 to 4 weeks, and a routed app with shared state takes about 2 to 3 months at 5 hours a week. Nuxt, server rendering and testing add more time.

What you need before you start

Solid HTML, CSS and JavaScript, including arrays, objects, modules and async code. Node.js and npm installed for running a Vite project.

Common mistakes to avoid

Forgetting .value when reading or updating a ref inside script code, then wondering why nothing changes. Templates unwrap refs, but script code does not.
Mixing Options API and Composition API tutorials and getting confused. Pick the Composition API with script setup for new projects and stick with it.
Leaving out the key on v-for lists, which causes odd rendering bugs when items move. Give each item a stable unique key.

How Learnr builds your course

Type your topic

Tell Learnr you want to learn Vue, or get as specific as you like.

Get a personalized course

Learnr instantly builds a full Vue course tailored to your goal and skill level.

Learn and level up

Move through bite-sized lessons and interactive practice, earning XP and keeping your streak.

Vue questions, answered

Should I learn Vue or React?

Both are popular and teach transferable component ideas. Vue templates feel closer to HTML and many find it gentler to start; React has a larger job market in many regions. Pick one and go deep.

What is the difference between the Options API and Composition API?

The Options API organizes a component into data, methods and computed sections. The Composition API groups logic by feature using functions like ref and computed, which scales better and is preferred in Vue 3.

What is Nuxt?

Nuxt is a framework built on Vue that adds file-based routing, server-side rendering and static site generation. It plays a role for Vue similar to what Next.js plays for React.