skills.rest
scsm-unrestrict
scsm-unrestrictCOMMUNITY
Explore all skills by this author →
GitHub

vue-expert

Builds Vue 3 applications with Composition API, Pinia stores, Nuxt 3 SSR, and Vite build optimization.

1|Updated Aug 18, 2026
Search Tags:#typescript#pwa#vite#pinia#vue 3#composition api#nuxt 3
One-click install
npx skills add https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent --skill vue-expert-scsm-unrestrict
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vue-expert
Source: https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent/tree/main/frontend-engineer/skills/vue-expert
Command: npx skills add https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent --skill vue-expert-scsm-unrestrict

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building modern Vue 3 applications requires coordinating many moving parts: Composition API reactivity patterns, Pinia state management, Nuxt 3 SSR/SSG configuration, Quasar/Capacitor mobile builds, PWA service workers, and Vite build tuning. This Skill consolidates senior-level Vue expertise into one place so you get correct, type-safe implementations without hunting through scattered documentation. ## Core Features & Use Cases - Vue 3 Component Development: Implements components with <script setup>, TypeScript-typed props/emits, composables, slots, provide/inject, and Teleport following Composition API best practices. - State & Routing: Sets up Pinia stores (setup-style with storeToRefs), persistence plugins, and Vue Router 4 patterns for SPA and SSR contexts. - Nuxt 3 & SSR: Configures file-based routing, useFetch/useAsyncData data fetching, server API routes, middleware, hydration mismatch prevention, and custom Fastify SSR. - Mobile, PWA & Build Tooling: Scaffolds Quasar/Capacitor hybrid apps with native plugins (camera, geolocation, push notifications), configures Workbox service workers, and tunes Vite with code splitting, sourcemaps, compression, and bundle analysis. - Use Case: Ask it to build a Nuxt 3 dashboard with a Pinia auth store, lazy-loaded routes, and an optimized Vite production build, and it delivers typed components, stores, and configuration with validation steps. ## Quick Start Ask the agent to create a Vue 3 component with Composition API and TypeScript, or to configure a Nuxt 3 project with Pinia state management and optimized Vite build settings.

Frequently Asked Questions about vue-expert

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a Vue 3 component with Composition API and TypeScript?▼

Use `<script setup lang="ts">` with `defineProps<T>()` for typed props and `defineEmits<T>()` for typed events. Use `ref()` for primitives, `reactive()` for objects, and `computed()` for derived state, then validate with `vue-tsc --noEmit`.

Should I use Pinia or Vuex for Vue 3 state management?▼

Use Pinia, as Vuex is deprecated in favor of Pinia for Vue 3. Pinia supports setup-style stores with `defineStore`, TypeScript inference, and plugins like pinia-plugin-persistedstate for localStorage persistence.

How do I fetch data in Nuxt 3 with SSR support?▼

Use `useFetch()` for SSR-safe data fetching or `useAsyncData()` for custom async logic with caching keys. For non-blocking loads, use `useLazyFetch()` or `useLazyAsyncData()`, and define server endpoints in the `server/api/` directory.

Can I build mobile apps with Vue 3 and Capacitor?▼

Yes, combine Quasar with Capacitor to build hybrid iOS and Android apps from a Vue 3 codebase. Capacitor plugins provide native access to camera, geolocation, and push notifications through typed composables.

How do I prevent hydration mismatch in Nuxt 3?▼

Wrap client-only values like timestamps or window dimensions in `<ClientOnly>` components, or set them inside `onMounted()` with a `v-if` fallback. For non-critical content, use progressive hydration with nuxt-delay-hydration.

How do I reduce Vue 3 bundle size with Vite?▼

Use route-based code splitting with dynamic imports, `defineAsyncComponent` for heavy components, and `manualChunks` in Vite config to separate vendor code. Analyze results with rollup-plugin-visualizer and add gzip or Brotli compression.

Related Skills

Explore More Software Engineering Skills→
symbiosikasymbiosika

frontend-app

Scaffold and edit Vue 3 components and views with Vite and Tailwind CSS v4.

Official
Advanced
SL-A-SHSL-A-SH

optimize

Diagnose Core Web Vitals and optimize front-end loading, rendering, and bundle size.

Community
Advanced
telum-aitelum-ai
2

visual-testing

Validate UI components against design tokens and WCAG AA standards.

Official
Advanced
blenviblenvi

vercel-react-best-practices

Optimize React and Next.js code for faster performance and smaller bundles.

Official
Advanced