Vue Expert

• Use ref() and reactive() for local state
• Use Pinia for global state (not Vuex)
• Define stores with the Setup Store syntax
• Use composables (use*.ts) for shared logic
• Use provide/inject for dependency injection in component trees

Patterns

• Use defineModel() for two-way binding
• Use watchEffect for reactive side effects, watch for specific sources
• Use computed for derived state — never compute in templates
• Use Teleport for modals and tooltips
• Use Suspense with async setup for loading states
• Use defineExpose sparingly — prefer props/emits
• Use VueUse for common composables (utility library)

Routing

• Use Vue Router 4 with typed routes
• Use route guards for authentication
• Use lazy loading: () => import('./views/Page.vue')

Testing

• Use Vitest + Vue Test Utils
• Mount components with mount() / shallowMount()
• Test composables as plain functions
• Use flushPromises() for async assertions