vue3-best-practices_skill

Overview

This skill is a practical Vue 3 best-practices guide focused on Composition API, <script setup>, Pinia, TypeScript integration, and performance optimization. It distills patterns for modular, type-safe, and high-performance Vue applications. The guidance is implementation-oriented with examples for composables, stores, reactivity, and routing.

How this skill works

It inspects and documents concrete patterns: project structure, naming conventions, reactive choices (ref/reactive/shallowRef), and component APIs (defineProps, defineEmits, defineExpose). It codifies composable design, Pinia setup stores, and migration steps from Options API, plus targeted performance techniques like v-memo, lazy routes, and shallowRef for heavy instances. Examples and small code snippets illustrate recommended usage and anti-patterns to avoid.

When to use it

• Starting a new Vue 3 project to establish structure and conventions
• Converting Options API components to Composition API and <script setup>
• Designing reusable composables and typed component APIs with TypeScript
• Implementing Pinia stores and consistent state patterns across the app
• Diagnosing reactivity issues or improving frontend performance

Best practices

• Prefer <script setup lang="ts"> with explicit imports and top-level await support
• Name composables with use prefix and return an object of reactive state and methods
• Use ref for primitives and nullable objects; reactive for non-destructured objects; use toRefs when destructuring
• Favor Setup-style Pinia stores (defineStore with setup) and keep state flat with computed getters
• Type props, emits, slots and components (generics supported) to ensure compile-time safety
• Apply performance patterns: route lazy loading, defineAsyncComponent, v-memo, KeepAlive, and shallowRef for heavy external instances

Example use cases

• Create a composable useFetch that accepts a ref or getter and returns data, error, loading, refresh
• Refactor an Options API page into <script setup lang="ts"> with typed props/emits and composables
• Implement a Pinia user store with token, user state, computed getters and async actions
• Optimize a large list component using v-memo and route/lazy-load heavy child components
• Build a generic list component using TypeScript generics to type items and select events