Vue Track

Why this stage matters

Vue is approachable, well documented, and widely used by agencies and product teams. Its Composition API teaches reactivity very clearly, and Nuxt gives you server rendering and full-stack features out of the box.

What to learn

1. Must know

   Single-File Components & Templates

   Mark as done

   <script setup>, template directives (v-if, v-for, v-model), props and emits, slots, and scoped styles.

   You're done when

   • You can build reusable components with props, emits, and slots.

   Resources

   • A Point of VueAbdallah Hemdan · Course · Arabic
   • Vue.js GuideDocs
2. Must know

   Composition API & Reactivity

   Mark as done

   ref, reactive, computed, watch, lifecycle hooks, and composables for sharing logic.

   You're done when

   • You know when to use ref versus reactive.
   • You have written composables that you reuse across components.

   Resources

   • Vue — Reactivity FundamentalsDocs
3. Must know

   Vue Router & Pinia

   Mark as done

   Routing with nested routes and navigation guards, and Pinia for shared client state.

   You're done when

   • You can protect routes with a navigation guard.
   • Your Pinia stores hold client state, not cached API data.

   Resources

   • Vue RouterDocs
   • PiniaDocs
4. Must know

   Nuxt

   Mark as done

   File-based routing, server rendering and hybrid rendering, data fetching with useFetch, server routes, and SEO with useHead.

   You're done when

   • You can choose a rendering mode per route and explain the choice.

   Resources

   • Nuxt DocsDocs

Common mistakes

• Mixing the Options API and Composition API in one codebase without a reason.
• Destructuring reactive objects and losing reactivity. Use toRefs or keep the object.