skills.rest
jvsandhu
jvsandhuCOMMUNITY
Explore all skills by this author →
GitHub

vue_expert

Implements Vue 3 applications using Composition API, Pinia stores, and Nuxt 3 with TypeScript.

Updated Jan 14, 2026
Search Tags:#typescript#frontend#composables#pinia#vue 3#composition api#nuxt 3
One-click install
npx skills add https://github.com/jvsandhu/agentic-skills --skill vue-expert-jvsandhu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vue_expert
Source: https://github.com/jvsandhu/agentic-skills/tree/main/skills/vue_expert
Command: npx skills add https://github.com/jvsandhu/agentic-skills --skill vue-expert-jvsandhu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building modern Vue 3 applications requires navigating the Composition API, reactivity system, state management, and SSR concerns, and mistakes like mixing Options API patterns or mismanaging reactivity lead to bugs and poor performance. ## Core Features & Use Cases - Composition API Implementation: Builds components with <script setup lang="ts">, type-safe defineProps/defineEmits, and reusable useX composables. - State Management & SSR: Designs Pinia stores with defineStore and configures Nuxt 3 projects with SSR/SSG-safe patterns. - Performance Optimization: Audits reactivity with computed, shallowRef, and markRaw to prevent unnecessary re-renders. - Use Case: When building a dashboard with shared filter logic across pages, this Skill extracts the logic into a composable, creates a Pinia store for global filter state, and delivers type-safe components ready for a Nuxt 3 project. ## Quick Start Ask the agent to build a Vue 3 component with Composition API and TypeScript that fetches and displays a list of items using a Pinia store.

Frequently Asked Questions about vue_expert

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

FAQPage Schema
How do I use the Vue 3 Composition API with TypeScript?▼

Use the `<script setup lang="ts">` syntax with `defineProps` and `defineEmits` for type-safe component interfaces. Use `ref()` for primitives, `reactive()` for objects, and `computed()` for derived state to keep reactivity predictable.

Pinia vs Vuex for Vue 3 state management?▼

Pinia is the recommended state management library for Vue 3, and Vuex is deprecated in its favor. Define stores with `defineStore` and use actions and getters for global state, avoiding Vuex entirely in new projects.

When should I use ref vs reactive in Vue 3?▼

Use `ref()` for primitive values and `reactive()` for objects. Vue 3.5 and later supports destructuring-friendly ref usage, and for performance-critical cases consider `shallowRef` or `markRaw` to skip deep reactivity.

Does Nuxt 3 support SSR with the Composition API?▼

Yes, Nuxt 3 supports SSR and SSG with the Composition API, but you must avoid DOM access outside of `onMounted` since server rendering has no browser DOM. Use `useFetch` and server routes for data fetching.

Why does my Vue watcher cause memory leaks?▼

Watchers and effects that are not cleaned up persist after a component unmounts, causing leaks. Always handle cleanup in `onUnmounted` or use the cleanup callback inside `watch`/`watchEffect`, and prefer `computed` when a watcher is unnecessary.

Related Skills

Explore More Software Engineering Skills→
fanguyunfanguyun

vue-expert

Create Vue 3 components with Composition API and Pinia state management.

Community
Advanced
enigmaicon-engenigmaicon-eng
1

vue-expert

Build Vue 3 applications with Composition API, TypeScript, and Pinia.

Community
Advanced
rahulgupta2018rahulgupta2018

modern-css-design-systems

Implement Tailwind v4 design tokens and accessible Radix primitives for React UIs.

Community
Advanced
alirezarezvanialirezarezvani
110

tech-stack-recommender

Recommend technology stacks from project requirements, team expertise, and constraints.

Community
Advanced