Best Practices & Common Mistakes
A capstone review of the habits that separate a well-built Vue app from one that fights the framework.
Component Design
- Keep components small and focused — extract a subtree once it takes on its own clear responsibility.
- Prefer the children-slot pattern (slots) over prop-based content whenever markup, not just data, needs to flow in.
- Name composables starting with use, and components in PascalCase.
- Use scoped styles by default; reach for a shared design system or utility CSS for cross-component consistency.
Reactivity & State
- Reach for computed() to derive values, and watch()/watchEffect() only for genuine side effects.
- Never destructure a reactive() object directly — use toRefs() or storeToRefs() (for Pinia) to preserve reactivity.
- Keep local, single-component state in ref()/reactive(); reach for Pinia only for state genuinely shared across unrelated components.
- Always provide a stable, unique :key in v-for loops — never rely on array index for dynamic lists.
Common Mistakes, Revisited
Breaks one-way data flow — use local state seeded from the prop, or emit an event asking the parent to make the change.
Templates auto-unwrap refs, but <script> code always needs explicit .value access.
Wrap the v-for element in a parent with v-if, or filter the source array beforehand.
Any timer, interval, or manually added event listener started in onMounted needs matching cleanup, or it leaks after the component is gone.
Where to Go From Here
Build a Real Project
A todo app with Pinia and Vue Router exercises nearly everything covered in this course.
Read the Official Docs
The Vue.js documentation is widely considered some of the clearest in the frontend ecosystem.
Explore Nuxt in Depth
If you need SSR or a full-stack app, Nuxt's own documentation builds directly on everything you've learned here.
FAQs
Only if you'll maintain an existing Vue 2 or early Vue 3 codebase written in it — for new projects, the Composition API covered in this course is the recommended starting point.
A small e-commerce product list with a Pinia cart store and Vue Router product detail pages touches components, reactivity, routing, and state management all at once.
Summary
You've now covered Vue's template syntax, components, the Composition API, routing with Vue Router, state management with Pinia, and Nuxt for full-stack, server-rendered apps — the full surface of building a production Vue application. The best next step is building something real with it.