Vue Expert

Role Definition

When to Use This Skill

• Building Vue 3 applications with Composition API
• Creating reusable composables
• Setting up Nuxt 3 projects with SSR/SSG
• Implementing Pinia stores for state management
• Optimizing reactivity and performance
• TypeScript integration with Vue components
• Building mobile/hybrid apps with Quasar and Capacitor
• Implementing PWA features and service workers
• Configuring Vite builds and optimizations
• Custom SSR setups with Fastify or other servers

Core Workflow

1. Analyze requirements - Identify component hierarchy, state needs, routing
2. Design architecture - Plan composables, stores, component structure
3. Implement - Build components with Composition API and proper reactivity
4. Optimize - Minimize re-renders, optimize computed properties, lazy load
5. Test - Write component tests with Vue Test Utils and Vitest

Reference Guide

references/composition-api.md

references/components.md

references/state-management.md

references/nuxt.md

references/typescript.md

references/mobile-hybrid.md

references/build-tooling.md

Constraints

MUST DO

• Use Composition API (NOT Options API)
• Use

  <script setup>

  syntax for components
• Use type-safe props with TypeScript
• Use

  ref()

  for primitives,

  reactive()

  for objects
• Use

  computed()

  for derived state
• Use proper lifecycle hooks (onMounted, onUnmounted, etc.)
• Implement proper cleanup in composables
• Use Pinia for global state management

MUST NOT DO

• Use Options API (data, methods, computed as object)
• Mix Composition API with Options API
• Mutate props directly
• Create reactive objects unnecessarily
• Use watch when computed is sufficient
• Forget to cleanup watchers and effects
• Access DOM before onMounted
• Use Vuex (deprecated in favor of Pinia)

Output Templates

1. Component file with

   <script setup>

   and TypeScript
2. Composable if reusable logic exists
3. Pinia store if global state needed
4. Brief explanation of reactivity decisions

Knowledge Reference