How do I install the Vue Data skill?

Run npx skillmds@latest add kimjinwoo4/vue-data in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Vue Data safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Vue Data?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Vue Data free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Vue Data?

KIMJINWOO4 (@kimjinwoo4) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Vue Data by kimjinwoo4 — Agent Skill

Name: Vue Data
Author: KIMJINWOO4

Vue Data

Server-state and data fetching for Vue 3. Pinia Colada (useQuery/useMutation, caching, invalidation, optimistic updates), Vue Router Data Loaders, choosing between fetch layers, race conditions, SSR concerns. Use when fetching API data, caching server responses, handling loading/error states, or wiring mutations in Vue apps.

KIMJINWOO4 c2d1df6 4 files · 12.4 KB Updated Sep 17, 2026

File contents

Vue Data Fetching Skill

Baseline 2026-07: Pinia Colada 1.x (stable, the recommended data layer for Vue), Vue Router 5 Data Loaders (experimental), TanStack Vue Query 5 as the heavyweight alternative. Nuxt apps: use built-in useFetch/useAsyncData first (see nuxt skill).

Core Rule

Server state ≠ client state. Do not put API data in hand-rolled Pinia stores with loading/error flags — use a query layer (Pinia Colada) that owns caching, deduplication, invalidation, and request lifecycle. Keep Pinia stores for genuinely client-owned state (auth session, UI preferences, drafts).

Decision Table

Situation	Use
Vue SPA fetching REST/GraphQL	Pinia Colada (`useQuery` / `useMutation`)
Data must be ready before route renders	Data Loaders (`defineColadaLoader` / `defineBasicLoader`)
Nuxt app	`useFetch` / `useAsyncData` (Nitro-aware, SSR payload)
Already on TanStack Query (React parity, infinite queries)	TanStack Vue Query — fine, don't churn
One-shot fire-and-forget call (form submit w/o cache impact)	plain `$fetch`/`ofetch` in an event handler
Truly static lookup fetched once at startup	composable + module-level cache is acceptable

Reference Map

Topic	Description	Path
Pinia Colada	useQuery, useMutation, keys, invalidation, optimistic updates, SSR	pinia-colada
Data Loaders	Route-bound loading with Vue Router 5 experimental loaders	data-loaders
Patterns & Pitfalls	Race conditions, AbortSignal, error handling, layering rules	patterns

---name: vue-datadescription: Server-state and data fetching for Vue 3. Pinia Colada (useQuery/useMutation, caching, invalidation, optimistic updates), Vue Router Data Loaders, choosing between fetch layers, race conditions, SSR concerns. Use when fetching API data, caching server responses, handling loading/error states, or wiring mutations in Vue apps.---# Vue Data Fetching Skill> Baseline 2026-07: Pinia Colada 1.x (stable, the recommended data layer for Vue), Vue Router 5 Data Loaders (experimental), TanStack Vue Query 5 as the heavyweight alternative. Nuxt apps: use built-in `useFetch`/`useAsyncData` first (see `nuxt` skill).## Core Rule**Server state ≠ client state.** Do not put API data in hand-rolled Pinia stores with `loading/error` flags — use a query layer (Pinia Colada) that owns caching, deduplication, invalidation, and request lifecycle. Keep Pinia stores for genuinely client-owned state (auth session, UI preferences, drafts).## Decision Table| Situation | Use ||-----------|-----|| Vue SPA fetching REST/GraphQL | **Pinia Colada** (`useQuery` / `useMutation`) || Data must be ready before route renders | **Data Loaders** (`defineColadaLoader` / `defineBasicLoader`) || Nuxt app | `useFetch` / `useAsyncData` (Nitro-aware, SSR payload) || Already on TanStack Query (React parity, infinite queries) | TanStack Vue Query — fine, don't churn || One-shot fire-and-forget call (form submit w/o cache impact) | plain `$fetch`/`ofetch` in an event handler || Truly static lookup fetched once at startup | composable + module-level cache is acceptable |## Reference Map| Topic | Description | Path ||-------|-------------|------|| **Pinia Colada** | useQuery, useMutation, keys, invalidation, optimistic updates, SSR | [pinia-colada](references/pinia-colada.md) || **Data Loaders** | Route-bound loading with Vue Router 5 experimental loaders | [data-loaders](references/data-loaders.md) || **Patterns & Pitfalls** | Race conditions, AbortSignal, error handling, layering rules | [patterns](references/patterns.md) |

Frequently asked questions