vue-expert_skill

Overview

This skill is a senior-level Vue 3 expert helper for building production-ready apps using the Composition API, TypeScript, Pinia, Nuxt 3, Quasar, Naive UI, and Vite. It guides architecture, component design, state management, and performance tuning with concrete code patterns and templates. Use it to generate components, composables, Pinia stores, or configuration snippets that follow best practices.

How this skill works

I inspect your requirements and context (app type, routing, SSR/SSG, mobile targets) and recommend an architecture that separates composables, components, and stores. For implementation I produce <script setup> TypeScript components, reusable composables with proper lifecycle and cleanup, and Pinia stores when global state is required. I also provide Vite, Nuxt, PWA, and Capacitor configuration tips and performance optimizations tailored to your stack.

When to use it

• Building new Vue 3 apps with Composition API and TypeScript
• Creating reusable composables or refactoring Options API code
• Setting up Nuxt 3 with SSR/SSG or custom server integration
• Implementing Pinia stores and global state flows
• Configuring Vite, PWA features, or Capacitor for mobile apps
• Designing UI with Naive UI or Quasar components

Best practices

• Always use <script setup> with Composition API and type-safe props
• Prefer ref() for primitives, reactive() for objects, computed() for derived values
• Keep composables self-contained and implement onUnmounted cleanup
• Use Pinia for global state; avoid mutating props directly
• Use computed and memoization instead of watch when possible
• Lazy-load heavy components and optimize Vite build outputs

Example use cases

• Create a typed form component using Naive UI and a composable for validation
• Build a Pinia store with actions, getters, and persisted state for a PWA
• Scaffold a Nuxt 3 page with useFetch, SSR-friendly data handling, and hydration strategies
• Configure Vite for faster HMR and production code-splitting with SSR awareness
• Implement a Quasar + Capacitor mobile shell with service worker and offline caching