Vue.js Assignments — Think Reactively. Ship Confidently.

Go from “hello, reactivity” to production-grade data flows, routing, state, and performance. Each topic-wise set includes 20 Basic, 20 Intermediate, and 10 Advanced hands-on questions so learners can practice deliberately and level up fast.

Why practice with these assignments?

Move beyond theory—build reactive components, master the Composition API, wire Vue Router, and manage state with Vuex/Pinia across real use cases.
Get job-ready with forms & validation, REST & GraphQL data flows, cancellation, retries, optimistic UI, and caching.
Design maintainable UIs using smart/container + dumb/presentational patterns, accessibility (ARIA, keyboard), renderless components, and event strategies.
Measure and tune performance: code-split, lazy-load, virtualize lists, memoize, and profile before/after improvements.

How it works

Open any assignment and solve questions in order: Basic → Intermediate → Advanced (each set is self-contained).
Use a fresh Vue 3 project; keep a running NOTES.md with decisions, trade-offs, and screenshots where relevant.
For data tasks, instrument loading / error / empty states; for networking, implement cancel/retry/backoff where asked.
Profile before shipping: capture DevTools timings, compare after optimizations, and summarize gains.

What you’ll achieve

Solid mental model of Vue reactivity (ref/reactive, watch/watchEffect, toRefs, shallow/markRaw, customRef).
Confidence with the Composition API (setup, lifecycle, composables, provide/inject, effectScope).
Routing mastery: dynamic & nested routes, guards, lazy loading, scrollBehavior, meta-based auth.
State at scale: Vuex & Pinia, persistence plugins, optimistic updates, module/store migrations.
Production-ready forms (schema-driven UIs, validation strategies, file uploads, accessibility).
Robust data layers with Axios & Apollo (interceptors, cancelation, retries, subscriptions, SWR).
Clean component design: container/presentational split, scoped slots, render functions/JSX, a11y.
Performance toolbelt: lazy routes/components, virtual lists, memoization, shallow refs, budgets in CI.

Browse the Assignments

Assignment 1 — Vue Basics & Reactivity
ref vs reactive, watchers, directives, VDOM, mixins vs Composition API, lifecycle, and performance knobs.
Assignment 2 — Composition API Mastery
Lifecycle hooks, composables (useCounter/useFetch/useInterval), provide/inject, effect scopes, and migration from Options API.
Assignment 3 — Vue Router
Dynamic/nested routes, guards (global/route/component), meta roles, lazy routes, scroll restoration, and breadcrumbs.
Assignment 4 — State with Vuex & Pinia
Modules, plugins, persistence, optimistic flows, action sequencing, and migration to Pinia with custom plugins.
Assignment 5 — Forms & Data Handling
v-model patterns, validation (sync/async), schema-driven forms, file uploads, REST/GraphQL submits, and accessibility.
Assignment 6 — Vue with REST & GraphQL
Axios/Apollo setup, tokens/refresh, cancel/dedupe/backoff, pagination (offset/cursor), subscriptions, and offline-first.
Assignment 7 — UI Patterns & Component Design
Container/dumb patterns, scoped & renderless components, JSX/render functions, event bus, ARIA & keyboard UX.
Assignment 8 — Performance Optimization
Code splitting, async components, debounce/throttle, markRaw/shallowRef, virtual lists, budgets, and build analysis.

Tips for success

Prove reactivity: log shapes/refs, show when views are copies vs views; use toRefs() when destructuring.
Prefer composables over mixins; isolate side-effects with watchEffect and clean up in lifecycle hooks.
Guard routes centrally with meta (auth/roles) and lazy-load heavy pages.
Persist state intentionally (whitelist + versioning/TTL) and plan migrations.
Design forms to be resilient: explicit loading/error, accessible labels, async validation & retries.
Treat data as unreliable: retries with backoff, cancel in-flight, dedupe requests, SWR cache.
Measure first: profile, then optimize with lazy routes/components, virtualization, and memoization.

Ready to build real confidence in Veu.js? Pick a set below and start solving!

FAQs

Q1. Should I use Vue 2 or Vue 3?
These assignments target Vue 3 (Composition API, v-memo, script setup, Suspense). Where migration topics appear, you’ll practice moving from Options API/mixins to composables.

Q2. Do I need a store from day one?
No. Start with local state and composables. Adopt Vuex/Pinia when cross-component or persisted state emerges, then migrate to Pinia for simpler patterns.

Q3. How are routes secured?
Use meta fields (requiresAuth, roles) with global, route, or component guards. Add lazy routes and scrollBehavior for UX polish.

Q4. What’s the difference between watch, watchEffect, and computed?
Use computed for derived state, watch for targeted side-effects, and watchEffect for auto-tracked effects. You’ll compare them through concrete tasks.

Q5. Forms: Vuelidate or custom?
You’ll do both: schema-driven forms with custom composables and Vuelidate-style rules, including async validation and accessible error states.

Q6. REST or GraphQL—what should I pick?
Try both. Implement Axios with interceptors/cancel/retry and Apollo with queries, mutations, subscriptions, and cache policies. Compare pagination models.

Q7. How do I avoid re-render storms?
Memoize expensive computed values, use v-memo, split components, and leverage shallowRef/markRaw for large non-reactive objects. Measure performance wins in DevTools.

Q8. What UI architecture do these exercises encourage?
A container/presentational split, renderless components for behavior reuse, scoped slots/JSX for flexibility, and explicit ARIA/keyboard support.

Q9. How do I handle auth/roles across routes and API calls?
Centralize checks in router guards (meta roles/scopes) and attach tokens with interceptors. Refresh on 401 responses and retry as needed.

Q10. How much time should I allocate per assignment?
Plan 30–60 minutes per difficulty band. Router guards, store migrations, schema-driven forms, and performance audits often take longer—opt for correctness and observability.