Prompt
Always prefer Vue’s native APIs and follow official Vue patterns instead of creating custom implementations. This ensures better compatibility, maintainability, and consistency with the Vue ecosystem.
Key practices:
- Use Vue’s native composables when available (e.g.,
useIdfrom Vue instead of custom implementations) - Follow Vue’s official configuration structures and API changes from changelogs
- Match Vue Router’s API patterns when creating similar functionality (e.g., exposing
useLinkcomposable) - Use proper Vue type definitions without redundancy
Example of migrating from custom to native Vue API:
// Before: Custom implementation
export function useId(key?: string): string {
// Custom SSR-friendly ID generation logic...
}
// After: Use Vue's native API
import { useId as _useId } from 'vue'
export const useId = _useId
Example of following Vue Router patterns:
// Expose useLink to match RouterLink behavior
export const NuxtLink = defineComponent({
// ... component definition
useLink: useNuxtLink, // Matches Vue Router's RouterLink.useLink pattern
})
This approach reduces maintenance burden, improves ecosystem compatibility, and ensures your components work seamlessly with Vue tooling and development experience.