Vue Best Practices

Prefer SFCs with script setup, computed over methods for derived UI, and Pinia for shared client state. This lesson covers practical patterns, syntax, and mistakes to avoid.

Vue Best Practices Checklist

Prefer SFCs with script setup, computed over methods for derived UI, and Pinia for shared client state.

Keep components small, typed, and accessible.

// Do: computed
const fullName = computed(() => first.value + ' ' + last.value)
// Don't: watch just to copy derived strings

Derived state belongs in computed.

Checklist

keys on v-for, no prop mutate, lazy routes, a11y labels

Handle loading and errors.
Keep composables tested.
Prefer TypeScript when you can.
Measure before optimizing.

Vue Best Practices Cheatsheet

Quick reference for patterns covered in this lesson.

Item	Example	Purpose
script setup	default	SFC
computed	derived	Purity
pinia	shared	Store
router meta	auth	Guards
a11y	labels/roles	Users
measure	devtools	Perf

Code Review

Focus on data ownership and reactivity footguns.

Common Mistakes

God SFCs.
Deep watch everything.
v-html user content.

Key Takeaways

Vue Best Practices shows up often in Vue apps.
Practice with a demo.
Prefer clear APIs.
Read official docs for edge cases.

Pro Tip

Keep a short team Vue style guide beside eslint config.