vue-expertUse when building Vue 3 applications with Composition API, Nuxt 3, or Quasar. Invoke for Pinia, TypeScript, PWA, Capacitor mobile apps, Vite configuration.
Install via ClawdBot CLI:
clawdbot install Veeramanikandanr48/vue-expertSenior Vue specialist with deep expertise in Vue 3 Composition API, reactivity system, and modern Vue ecosystem.
You are a senior frontend engineer with 10+ years of JavaScript framework experience. You specialize in Vue 3 with Composition API, Nuxt 3, Pinia state management, and TypeScript integration. You build elegant, reactive applications with optimal performance.
Load detailed guidance based on context:
| Topic | Reference | Load When |
|-------|-----------|-----------|
| Composition API | references/composition-api.md | ref, reactive, computed, watch, lifecycle |
| Components | references/components.md | Props, emits, slots, provide/inject |
| State Management | references/state-management.md | Pinia stores, actions, getters |
| Nuxt 3 | references/nuxt.md | SSR, file-based routing, useFetch, Fastify, hydration |
| TypeScript | references/typescript.md | Typing props, generic components, type safety |
| Mobile & Hybrid | references/mobile-hybrid.md | Quasar, Capacitor, PWA, service worker, mobile |
| Build Tooling | references/build-tooling.md | Vite config, sourcemaps, optimization, bundling |
syntax for componentsref() for primitives, reactive() for objectscomputed() for derived stateWhen implementing Vue features, provide:
and TypeScriptVue 3 Composition API, Pinia, Nuxt 3, Vue Router 4, Vite, VueUse, TypeScript, Vitest, Vue Test Utils, SSR/SSG, reactive programming, performance optimization
Generated Mar 1, 2026
Develop a Vue 3 dashboard with Composition API to display live data updates, using Pinia for state management and computed properties for derived metrics. Ideal for monitoring systems in industries like finance or logistics, with reactive components ensuring minimal re-renders and optimized performance.
Implement a Progressive Web App with Nuxt 3 for server-side rendering, integrating service workers for offline functionality and Pinia for cart and user state. This scenario suits retail businesses needing fast, reliable mobile experiences with TypeScript ensuring type safety across components.
Use Quasar and Capacitor with Vue 3 to build a cross-platform mobile app, leveraging Composition API for reusable composables and Vite for optimized builds. Common in healthcare or education sectors for apps requiring native device features and offline capabilities.
Enhance a Vue 3 SaaS platform by refactoring to Composition API, implementing lazy loading and computed properties to reduce re-renders, and configuring Vite for faster builds. This benefits tech startups or enterprise software needing scalable, high-performance frontends.
Build a CMS with Nuxt 3 for static site generation, using Pinia for user permissions and content state, and TypeScript for robust component typing. Ideal for media or publishing industries requiring SEO-friendly, fast-loading websites with complex state management.
Offer Vue 3 development services for recurring revenue through monthly or annual subscriptions, focusing on building and maintaining scalable applications like dashboards or e-commerce platforms. Revenue streams include tiered pricing based on features and support levels.
Provide expert Vue 3 consulting for one-off projects such as mobile app development or performance optimization, charging fixed or hourly rates. This model suits agencies or freelancers targeting industries like retail or healthcare with specific implementation needs.
Generate revenue by selling pre-built Vue 3 components, composables, or Nuxt 3 templates to developers, with licenses for commercial use. This leverages the skill's output templates and reference guides, appealing to startups or solo developers seeking rapid development.
š¬ Integration Tip
Integrate this skill by first analyzing project requirements to match triggers like Vue 3 or Nuxt, then follow the core workflow to design with Composition API and Pinia, ensuring adherence to constraints for optimal performance.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.
Use when building UI with shadcn/ui components, Tailwind CSS layouts, form patterns with react-hook-form and zod, theming, dark mode, sidebar layouts, mobile navigation, or any shadcn component question.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when building web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Create distinctive, production-grade static sites with React, Tailwind CSS, and shadcn/ui ā no mockups needed. Generates bold, memorable designs from plain text requirements with anti-AI-slop aesthetics, mobile-first responsive patterns, and single-file bundling. Use when building landing pages, marketing sites, portfolios, dashboards, or any static web UI. Supports both Vite (pure static) and Next.js (Vercel deploy) workflows.
AI skill for automated UI audits. Evaluate interfaces against proven UX principles for visual hierarchy, accessibility, cognitive load, navigation, and more. Based on Making UX Decisions by Tommy Geoco.