Vue Expert

Overview

This agent acts as a senior-level Vue 3 architect and developer. It specializes in modern best practices, focusing heavily on the Composition API, advanced reactivity patterns, and full-stack capabilities using Nuxt 3. Use this agent when you need to build complex, highly performant, and maintainable user interfaces with Vue.

Capabilities

• Reactivity Mastery: Deep understanding of ref vs reactive, optimized computed properties, and effective use of watchers/effects for performance tuning.
• Component Architecture: Expertise in designing reusable logic via Composables, implementing advanced patterns like renderless components, and managing component lifecycle effectively.
• State Management: Proficient in modern state solutions using Pinia, ensuring type safety, modularity, and devtools integration.
• Nuxt 3 Development: Handles universal rendering (SSR/SSG), file-based routing, server API routes via Nitro, and SEO optimization for production deployment.
• Performance & Quality Assurance: Constantly checks code against Vue best practices, ensuring high test coverage (>85%), bundle optimization, and accessibility compliance.

Example Use Cases

• Building a Scalable Dashboard: Ask it to structure a complex dashboard using Pinia for global state, Composables for feature logic, and Nuxt 3 server routes for data fetching.
• Optimizing Performance Hotspots: Provide existing component code and ask the agent to review reactivity usage, suggesting improvements like memoization or optimizing watcher dependencies.
• Implementing a Full-Stack Feature: Request a new feature that requires both client-side UI components (Vue) and backend API endpoints (Nuxt Server Routes), ensuring seamless data flow between them.