Vue Roadmap
This Vue Roadmap is a free, full-text syllabus of 84 lessons in 16 stages, starting with App Configurations and ending with API Calls. It suits anyone who wants to learn Vue, whether new to it or filling gaps. There is no fixed length: every lesson is open from the start, so you go at your own pace and skip what you already know.
Last updated
Reading is open to everyone. Sign in to join this roadmap and track what you finish.
Continue learning
1. App ConfigurationsApp Configurations
0%App Configurations
5 topics · 3 sub-topics · 0 completed
The last 1 topic is drawn beside this stage on the original roadmap. Which stage they belong to is not recorded, so they are listed here rather than filed under one.
The diagram draws the same 84 lessons as a map, with lines showing the order. It needs JavaScript; the full syllabus below lists every lesson as text.
Full syllabus: every lesson in the Vue roadmap
16 stages and 84 lessons, in the order the roadmap suggests. Every lesson is free to read and open from the start.
Stage 1: App Configurations
App Configurations
Every application instance exposes a config object that contains the configuration settings for that application. You can modify its properties before mounting your application.
Error / Warn Handler
Debugging in Vue.js involves identifying and fixing issues in your Vue applications. It’s an essential part of the development process, and there are several tools and techniques you can use to effectively debug your Vue code.
Global Properties
Global properties allows you to add properties or methods that can be accessed throughout your application. This is particularly useful for sharing functionality or data across components without the need to pass props explicitly.
Performance
Key areas to improve Vue.js performance include lazy loading components to minimize initial load times, optimizing rendering to prevent unnecessary re-renders, implementing efficient state management using modern libraries like Pinia, reducing the bundle size by code splitting and tree shaking, utilizing virtual…
create-vue
create-vue is a CLI tool that helps you create a new Vue project with a single command. It is a simple and easy-to-use tool that saves you time and effort when setting up a new Vue project.
Stage 2: Components
Components
Components allow us to split the UI into independent and reusable pieces, and think about each piece in isolation.
Component Registration
A Vue component needs to be "registered" so that Vue knows where to locate its implementation when it is encountered in a template. There are two ways to register components: global and local.
Single File Components
Vue Single-File Components (a.k.a. .vue files, abbreviated as SFC) is a special file format that allows us to encapsulate the template, logic, and styling of a Vue component in a single file.
Props
If we are building a blog, we will likely need a component representing a blog post. We want all the blog posts to share the same visual layout, but with different content. Such a component won't be useful unless you can pass data to it, such as the title and content of the specific post we want to display. That's…
Events
As we develop our applications we may need to communicate with the parent component in order to notify of some actions e.g. when a user clicks on a button. In order to do this we need to use events.
v-model
v-model is a directive that allows you to create two-way data bindings on form input, textarea, and select elements. It automatically picks the correct way to update the element based on the input type.
Attribute Inheritance
Attribute inheritance aka "fallthrough attributes" is a feature of Vue.js that allows you to inherit attributes from a parent component.
Stage 3: Templates
Templates
Vue uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying component instance's data. All Vue templates are syntactically valid HTML that can be parsed by spec-compliant browsers and HTML parsers.
Stage 4: API Styles
API Styles
Though Vue 2 supported many approaches to writing components, only one approach, the "Options API", was built in and accessible without plugins. Vue 3, retains the Options API (OAPI), and adds in the Composition API (CAPI). Composition API itself is actually a part of the Options API, but moves most of the…
Options API
Vue offers many approaches for how to write components, including the Options API. It is the only API that is available in all versions of Vue. Its primary focus is on providing a consistent, clean, and organized approach to writing component logic. Each part of a component's logic is given a dedicated section…
Composition API
Vue offers many approaches for how to write components, including the "Composition API", which is most commonly used via "Script Setup". This approach is based around pulling in low level atomic functions used by Vue's reactivity engine. By composing these low level functions together, you can craft your own system…
Stage 5: Directives
Directives
Directives are special attributes with the v- prefix. Vue provides a number of built-in directives.
Stage 6: Lifecycle Hooks
Lifecycle Hooks
Each Vue component instance goes through a series of initialization steps when it's created - for example, it needs to set up data observation, compile the template, mount the instance to the DOM, and update the DOM when data changes. Along the way, it also runs functions called lifecycle hooks, giving users the…
Stage 7: Forms Handling
Forms Handling
You can use the v-model directive to create two-way data bindings on form input elements. It automatically picks the correct way to update the element based on the input type.
Input Bindings
Input bindings are a way to bind user input to a component's data. This allows the component to react to user input and update its state accordingly. Input bindings are typically used with form elements such as text inputs, checkboxes, and select dropdowns.
v-model
The v-model directive in Vue.js is used for creating two-way data bindings on form input elements, such as <input, <textarea, and <select. This means that the data can be updated in the component when the user inputs something, and the UI will update if the data in the component changes.
Modifiers
Modifiers are special suffixes that can be added to directives (such as v-model and v-bind) to alter their behavior. Modifiers allow you to specify additional functionality or constraints to the binding, making it more flexible and powerful.
Conditional Rendering
The directive v-if is used to conditionally render a block. The block will only be rendered if the directive's expression returns a truthy value.
Rendering Lists
We can use the v-for directive to render a list of items based on an array. The v-for directive requires a special syntax in the form of item in items, where items is the source data array and item is an alias for the array element being iterated on.
Optimizing Renders
Optimizing rendering is crucial for ensuring a smooth and efficient user experience across all your frontend projects. Sluggish webpages can lead to frustration for users, and potentially cause them to entirely abandon your web application. This issue comes up most often in single-page applications (SPAs), where…
Debugging
Debugging in Vue.js involves identifying and fixing issues in your Vue applications. It’s an essential part of the development process, and there are several tools and techniques you can use to effectively debug your Vue code.
v-text
The v-text directive is used to set the textContent property of an element. It's important to note that when using this directive it will overwrite the HTML content inside the element. The expected input is a string, so it's important to wrap any text in single quotes.
v-html
The v-html directive is similar to the v-text directive, but the difference is that v-html renders its content as HTML. This means that if you pass an HTML element it will be rendered as an element and not plain text. Since the content is render as HTML, it can pose a security risk if the content contains malicious…
v-bind
The v-bind directive dynamically binds an HTML attribute to data. The shorthand for this directive is :
v-model
The v-model directive in Vue.js is used for creating two-way data bindings on form input elements, such as <input, <textarea, and <select. This means that the data can be updated in the component when the user inputs something, and the UI will update if the data in the component changes.
v-once
The v-once directive makes an HTML element render only once, skipping every future update.
v-pre
The v-pre directive makes an element render its content as-is, skipping its compilation. The most common use case is when displaying raw mustache syntax.
Stage 8: Event Handling
Event Handling
When you build a dynamic website with Vue you'll most likely want it to be able to respond to events. For example, if a user clicks a button, submits a form, or even just moves their mouse, you may want your Vue site to respond somehow.
Binding Events
Vue.js is an open-source Model–View–ViewModel front-end JavaScript framework for building user interfaces and single-page applications. Vue.js has many own directives for DOM manipulation such as v-bind, v-on, v-model, etc. Binding events is an essential part of creating interactive applications. You can bind…
Async Components
In large applications, we may need to divide the app into smaller chunks and only load a component from the server when it's needed. To make that possible, Vue has a defineAsyncComponent function.
Inline / Method Handlers
In Vue.js, inline handlers are defined directly in the template using expressions, making them suitable for simple tasks. For example, you might use an inline handler to increment a counter. Method handlers, on the other hand, are defined in the methods option and are better for more complex logic or when reusing…
Teleport Components
Sometimes we may run into the following scenario: a part of a component's template belongs to it logically, but from a visual standpoint, it should be displayed somewhere else in the DOM, outside of the Vue application. This is where the <Teleport component comes in.
Event Modifiers
In Vue.js, event modifiers are special postfixes that you can add to event handlers to control the behavior of events more easily. They help simplify common tasks such as stopping propagation, preventing default actions, and ensuring that the event is triggered only under certain conditions.
Provide / Inject
Usually, when we need to pass data from the parent to a child component, we use props. However, imagine the case where we have a large component tree, and a deeply nested component needs something from a distant ancestor component. With only props, we would have to pass the same prop across the entire parent chain.…
Key Modifiers
Input bindings are a way to bind user input to a component's data. This allows the component to react to user input and update its state accordingly. Input bindings are typically used with form elements such as text inputs, checkboxes, and select dropdowns.
Custom Directives
So far you may have covered two forms of code reuse in Vue: components and composables. Components are the main building blocks, while composables are focused on reusing stateful logic. Custom directives, on the other hand, are mainly intended for reusing logic that involves low-level DOM access on plain elements.
Mouse Button Modifiers
Mouse button modifiers are a type of modifier that can be used with event handlers to specify which mouse button or buttons should trigger the event. These modifiers allow you to customize the behavior of event handlers, such as v-on:click, to respond to specific mouse button clicks.
Plugins
Plugins are self-contained code that usually add app-level functionality to Vue.
Watchers
Computed properties allow us to declaratively compute derived values. However, there are cases where we need to perform "side effects" in reaction to state changes - for example, mutating the DOM, or changing another piece of state based on the result of an async operation. With Composition API, we can use the…
Slots
In some cases, we may want to pass a template fragment to a child component, and let the child component render the fragment within its own template. The <slot element is a slot outlet that indicates where the parent-provided slot content should be rendered.
Stage 9: Computed Properties
Computed Properties
In-template expressions are very convenient, but they are meant for simple operations. Putting too much logic in your templates can make them bloated and hard to maintain. Computed properties allow us to simplify the complex logic that includes reactive data.
Stage 10: SSG
SSG
A static site generator is a tool that generates a full static HTML website based on raw data and a set of templates. Essentially, a static site generator automates the task of coding individual HTML pages and gets those pages ready to serve to users ahead of time. Because these HTML pages are pre-built, they can…
VitePress
Vitepress is a static site generator that is built on top of Vite. It is a lightweight and fast static site generator that is designed to work with Vue 3. Vitepress is a great choice for building documentation sites, blogs, and other static sites.
v-show
v-show is similar to v-if in that it allows you to conditionally render components. However, it does not remove the component from the DOM and merely toggles its display CSS property to be hidden. It also does not work with v-else-if oe v-else. Prefer v-show over v-if if the component's visibility needs to change…
v-if
Conditionally render an element or a template fragment based on the truthy-ness of the expression value. When a v-if element is toggled, the element and its contained directives / components are destroyed and re-constructed. If the initial condition is falsy, then the inner content won't be rendered at all.
v-else
The v-else conditionally renders an element or a template fragment as a function in case the v-if does not fulfil the condition.
v-else-if
This directive is used to add additional conditions to a v-if and v-else block.
v-for
The v-for directive is used to render an HTML element, a block of elements, or even a component based on an array, an object, or a set number of times. When using this directive it is important to assign a unique key to each item to avoid issues and improve performance. This directive follows the item in items syntax.
v-on
The v-on directive is placed on an element to attach an event listener. To attach an event listener with v-on we need to provide the event type, and any modifier, and a method or expression that should run when that event occurs.
v-slot
The v-slot directive to define slots in components, allowing you to pass and render content dynamically inside a component.
v-cloak
The v-cloak directive is used to prevent the uncompiled Vue template from being visible while the Vue instance is still loading. It temporarily hides the content until Vue has finished compiling the template. The v-cloak directive remains until the component instance is mounted.
VueUse
VueUse is a collection of utility functions based on Composition API. It has over 200+ functions, is tree-shakable, has first-class TypeScript support, and has a small bundle size. VueUse is a great choice for adding common utilities to your Vue 3 projects.
Transition
Vue offers two built-in components that can help work with transitions and animations in response to changing state:
Transition Group
<TransitionGroup is a built-in component designed for animating the insertion, removal, and order change of elements or components that are rendered in a list.
Stage 11: SSR
SSR
Server-side rendering refers to the process that the service side completes the HTML structure splicing of the page, sends it to the browser, and then binds the status and events for it to become a fully interactive page.
Quasar
Quasar Framework is an open-source Vue.js based framework for building apps, with a single codebase, and deploy it on the Web as a SPA, PWA, SSR, to a Mobile App, using Cordova for iOS & Android, and to a Desktop App, using Electron for Mac, Windows, and Linux.
Nuxt.js
Nuxt.js is a free and open source JavaScript library based on Vue.js, Node.js, Webpack and Babel.js. Nuxt is inspired by Next.js, which is a framework of similar purpose, based on React.js.
Stage 12: Forms
Forms
Apart from the built-in form-binding support, there are several options available that allow for handling forms and data in much convenient manner.
FormKit
FormKit helps build forms faster by simplifying form structure, generation, validation, theming, submission, error handling, and more.
Vee Validate
OpenSource plugin to handle form validations in Vue.js
Vuelidate
Simple, lightweight model-based validation for Vue.js.
Stage 13: Routing
Routing
Routing is an essential concept in Single Page Applications (SPA). When your application is divided into separated logical sections, and all of them are under their own URL, your users can easily share links among each other.
Vue Router
Vue Router is the official router for Vue.js which allows creating static/dynamic routes, has support for navigation interception, allows for component based configuration and much more.
Stage 14: State Management
State Management
Application state management is the process of maintaining knowledge of an application's inputs across multiple related data flows that form a complete business transaction -- or a session -- to understand the condition of the app at any given moment. In computer science, an input is information put into the…
Pinia
Pinia is a store library for Vue.js, and can be used in Vue 2 and Vue 3, with the same API, except in SSR and its installation. It allows state sharing between pages and components around the application. As the documentation says, it is extensible, intuitive (by organization), has devtools support (in Vue.js…
Stage 15: Mobile Apps
Mobile Apps
Building a mobile application with Vue.js is not impossible. In fact, you can build production-ready apps that look and feel like native mobile apps with Vue.js.
Capacitor
Since Vue.js is a web framework, it does not natively support mobile app development. So how do we get access to native mobile features such as the camera and geolocation? Ionic has an official native runtime called Capacitor. With Capacitor’s plugin, you can access the native API of the device your app is running…
Tailwind CSS
CSS Framework that provides atomic CSS classes to help you style components e.g. flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.
Vuetify
Vuetify is a Vue UI Library with beautifully handcrafted Material Components. No design skills required — everything you need to create amazing applications is at your fingertips.
Element UI
Element UI is another Vue.js component library with several built-in components to style your Vue.js applications.
Vitest
Vitest is a fast Vite-native unit test framework with out-of-box ESM and TypeScript support. It Works on React, Vue, Svelte and more projects created with Vite.
Vue Testing Library
The Vue Testing Library is a very lightweight solution for testing Vue components. Its primary guiding principle is: The more your tests resemble the way your software is used, the more confidence they can give you.
Cypress
Cypress framework is a JavaScript-based end-to-end testing framework built on top of Mocha – a feature-rich JavaScript test framework running on and in the browser, making asynchronous testing simple and convenient. It also uses a BDD/TDD assertion library and a browser to pair with any JavaScript testing framework.
Playwright
Playwright Test was created specifically to accommodate the needs of end-to-end testing. Playwright supports all modern rendering engines including Chromium, WebKit, and Firefox. Test on Windows, Linux, and macOS, locally or on CI, headless or headed with native mobile emulation of Google Chrome for Android and…
Stage 16: API Calls
API Calls
There are several options available to make API calls from your Vue.js applications.
Apollo
Apollo is a platform for building a unified graph, a communication layer that helps you manage the flow of data between your application clients (such as web and native apps) and your back-end services.
Axios
Axios is a client HTTP API based on the XMLHttpRequest interface provided by browsers. The most common way for frontend programs to communicate with servers is through the HTTP protocol. You are probably familiar with the Fetch API and the XMLHttpRequest interface, which allows you to fetch resources and make HTTP…
fetch
The fetch() method in JavaScript is used to request to the server and load the information on the webpages. The request can be of any APIs that return the data of the format JSON or XML. This method returns a promise.
Tanstack Query
TanStack Query is a data fetching and caching library for Vue.js and React. It is a part of the TanStack ecosystem.
Questions about the Vue Roadmap
Is the Vue Roadmap free?
Yes. All 84 lessons in this roadmap are free to read on Bibha AI Learning Labs, with no account and no payment. Signing in is optional: it lets you mark lessons as done and keep your progress, and it opens the AI tutor, which runs on your own API key.
How long does the Vue Roadmap take?
There is no fixed duration. It has 84 lessons in 16 stages, and the time it takes depends on how many hours you give it each week. Nothing is locked, so you can skip what you already know, and your progress is saved once you sign in.
Where should I start the Vue Roadmap?
Start with stage 1, App Configurations, and work down in order. The stages are numbered in the order the roadmap suggests, but every lesson is open, so if you already know App Configurations you can go straight to Components or anything after it. Each lesson links to free resources for going deeper.
Can I learn Vue in Hindi?
The lessons are written in English. Once you sign in, you can ask the AI tutor on any lesson to explain it in Hindi or Hinglish. It answers from that lesson’s own text, so the explanation stays on the syllabus. The tutor runs on your own Google, OpenAI or Anthropic key.