Vue

Understand how a Vue application is created, mounted, and how component lifecycle hooks let you run code at specific moments.

Learn Vue's declarative template syntax including interpolation, v-bind, v-on, v-if, v-for, and v-model for rendering dynamic UI.

Derive values reactively with computed properties and respond to data changes with watchers for side effects.

Dynamically apply CSS classes and inline styles to elements based on component state.

Handle user interactions with v-on, understand event modifiers like .prevent and .stop, and work with keyboard and form events.

Use v-model to create two-way data bindings on form inputs, textareas, selects, and understand its modifiers.

You can build simple interactive pages with Vue's template syntax, directives, and reactivity basics.

Understand the .vue file format combining template, script, and style blocks into cohesive, reusable components.

Pass data down to child components with props and communicate back up using custom events with $emit.

Create flexible component layouts using default slots, named slots, and scoped slots for content distribution.

Switch between components at runtime with <component :is> and lazy-load components with defineAsyncComponent.

Share data across deeply nested components without prop drilling, useful for themes, configs, and shared services.

You can design and compose reusable component trees with clear data flow and flexible content distribution.

Organize component logic by concern using ref, reactive, and the setup function (or <script setup>) instead of the Options API.

Understand the traditional Options API with data, methods, computed, and watch — still widely used in existing codebases.

Learn how Vue's reactivity system works under the hood with Proxies, understand ref vs reactive, shallowRef, and triggerRef.

Extract and reuse stateful logic across components by writing custom composable functions following the use* naming convention.

Manage global application state with Pinia stores — define state, getters, and actions in a type-safe, devtools-friendly way.

You can structure complex state logic using composables and manage global state effectively with Pinia.

Set up client-side routing with Vue Router — define routes, use router-link and router-view, and handle route params.

Control route access with beforeEach, beforeEnter, and per-component guards; attach metadata to routes for auth and permissions.

Fetch data from APIs using fetch or axios within components, composables, or navigation guards, handling loading and error states.

You can build multi-page SPAs with protected routes, dynamic segments, and clean data fetching patterns.

Apply enter/leave transitions to elements and components using Vue's built-in <Transition> and <TransitionGroup> components.

Create reusable low-level DOM manipulation logic by writing custom directives for cases where components are overkill.

Bypass templates and use JavaScript render functions or JSX for dynamic component creation when templates become limiting.

Optimize Vue apps with lazy loading, v-once, v-memo, virtual scrolling, and understanding the virtual DOM diffing process.

Add type safety to Vue components, props, emits, composables, and Pinia stores using TypeScript and Vue's built-in type helpers.

You can write performant, type-safe Vue applications using advanced composition and rendering techniques.

Write unit and component tests using Vitest and Vue Test Utils — mount components, simulate interactions, and assert output.

Build full-stack Vue applications with Nuxt — server-side rendering, file-based routing, auto-imports, and API routes.

Understand Vite as Vue's recommended build tool — dev server, HMR, build optimization, environment variables, and plugin ecosystem.

Test complete user flows in the browser using Playwright or Cypress to catch integration issues before production.

You can build, test, optimize, and deploy complete Vue applications with confidence using modern tooling and best practices.