Vue

roadmap.sh: https://roadmap.sh/vue

Suggested path through the Vue nodes. Each node links to its lesson when written.

Nodes

Getting started

• create-vue
• Single-file components
• Options API
• Composition API
• App configurations
• Debugging

Templates & directives

• Templates
• Directives
• v-bind
• v-on
• v-if
• v-else
• v-else-if
• v-show
• v-for
• v-model
• v-html
• v-text
• v-once
• v-pre
• v-cloak
• v-slot
• Custom directives

Components

• Components
• Component registration
• Props
• Attribute inheritance
• Slots
• Provide / inject
• Async components
• Dynamic components
• Teleport components

Reactivity

• Computed properties
• Watchers
• Lifecycle hooks

Event handling

• Event handling
• Binding events
• Events
• Inline & method handlers
• Modifiers
• Event modifiers
• Key modifiers
• Mouse button modifiers

Forms

• Forms
• Forms handling
• Input bindings
• VeeValidate
• Vuelidate
• FormKit

Transitions & animation

• Transition
• Transition group

State management

• State management
• Pinia
• VueUse

Routing

• Routing
• Vue Router

Plugins & global config

• Plugins
• Global properties
• Error & warn handler

API calls

• API calls
• Fetch
• Axios
• API styles
• TanStack Query
• GraphQL — Apollo

Performance

• Performance
• Optimizing renders

Rendering

• Conditional rendering
• Rendering lists
• SSR
• SSG

Styling

• Tailwind CSS

UI libraries

• Vuetify
• Quasar
• Element UI

Testing

• Vitest
• Vue Testing Library
• Cypress
• Playwright

Frameworks & mobile

• Nuxt.js
• VitePress
• Mobile apps
• Capacitor

Resources

See resources.md.

Project ideas

• Build a weather dashboard with the Composition API and <script setup>, fetching data via VueUse’s useFetch and caching with TanStack Query.
• Create a to-do app with Pinia for state, Vue Router for views, and VeeValidate-powered forms, styled with Vuetify.
• Ship a content-driven personal site with Nuxt.js (SSR) plus a docs section built in VitePress, deployed to a static host.