Vue 3 Expert: Composition API, Pinia, Nuxt 3, and Quasar or Capacitor
Build typed Vue 3 Composition API components, composables, Pinia stores, Nuxt 3 SSR or SSG routes, and Quasar or Capacitor apps.
Before & after
Same prompt, same agent — the only difference is the skill.
Vue 3 is a great framework for building interactive user interfaces. For a real-time dashboard, you'll want to use the Composition API to manage state and effects. You might consider using composables to share logic across components. Pinia is a good choice for state management if you need to sync data across multiple parts of your app. You could also think about using WebSockets or polling to fetch updates from your server. There are performance considerations around re-rendering and how often you update the DOM. Would you like suggestions on specific libraries for real-time data handling?
VUE 3 REAL-TIME DASHBOARD ARCHITECTURE:
COMPOSITION API SETUP
// Dashboard composable with lifecycle management
export function useLiveMetrics() {
const metrics = ref({ users: 0, revenue: 0, errors: 0 })
const loading = ref(false)
const wsConnection = ref(null)
onMounted(() => {
wsConnection.value = new WebSocket('wss://api.example.com/metrics')
wsConnection.value.onmessage = e => {
metrics.value = JSON.parse(e.data)
}
})
onUnmounted(() => wsConnection.value.close())
return { metrics, loading }
}
COMPONENT INTEGRATION
- Use shallow ref for large metric objects to prevent deep reactivity overhead
- Batch updates with debounced computed properties
- Split into MetricCard subcomponents to isolate re-renders
- Use v-memo on expensive list renders
PINIA STORE PATTERN
defineStore('dashboardMetrics', () => {
const state = ref({ ... })
const updateMetric = action (key, value) => state.value.key = value
return { state, updateMetric }
})
PERFORMANCE TUNING
• Lazy-load charts with defineAsyncComponent
• Use requestAnimationFrame for smooth animations
• Unsubscribe from WebSocket on component destroy
About this skill
Building a Vue 3 feature means deciding where each piece of state lives, how shared logic is reused, and how each route should render. This skill makes those decisions explicitly and then writes the code: typed <script setup> components, composables instead of mixins, domain-scoped Pinia stores, and per-route Nuxt 3 rendering.
What it does
- Builds Vue 3 components with
<script setup>,ref,reactive, andcomputed, with props and emits typed throughdefineProps<T>()anddefineEmits. - Extracts shared reactive logic into composables with explicit inputs, return values, and cleanup.
- Sets up Pinia stores with
defineStore, split by domain, with derived values as getters. - Configures Nuxt 3 projects so each route uses SSR, static generation, or hybrid rendering based on what that route needs.
- Scaffolds hybrid mobile apps with Quasar or Capacitor and keeps native plugin use to what the feature requires.
What you get
Working code for the files the request needs, the state and rendering decisions behind it, any assumptions stated plainly, and verification steps marked as unrun until you run them.
Best for
Developers starting or extending Vue 3 applications, Nuxt 3 sites, or Quasar and Capacitor mobile apps who want idiomatic Composition API code with typed contracts and deliberate state and rendering choices.
SKILL.md preview
---
name: vue-expert
description: Builds Vue 3 components with the Composition API, extracts composables, sets up Pinia stores, configures Nuxt 3 SSR, SSG, or hybrid rendering per route, and scaffolds Quasar or Capacitor mobile apps. Use when the user says "build this Vue component", "convert this to script setup", "turn this mixin into a composable", "set up a Pinia store", "migrate from Vuex to Pinia", "make these Nuxt pages static", "configure SSR for this route", or "scaffold a Quasar app" or "wrap this Vue app with Capacitor".
---
# Vue Expert
… (sign up to view the full skill)More development skills
View all Development skills →Frontend Component UX and Accessibility Review
Severity-ranked fixes with code for UI components: states, keyboard, focus, ARIA, touch targets, contrast, and responsive breakage.
Three.js Click-to-Learn 3D Game Builder
Build click-to-learn 3D games in Three.js: TSL materials, reliable object picking, and an accessible quiz overlay fed by content data.
Angular Standalone Features and State Architecture
Build Angular standalone features with lazy routes, scoped state, safe RxJS flows, and targeted tests.
shadcn/ui Component Building and Theming
Build, theme, and debug shadcn/ui components the way the library is designed to work, with Tailwind v3 and v4 theming handled correctly.