Agent skill · software engineering · secondsky
pinia-colada
Pinia Colada data fetching for Vue/Nuxt with useQuery, useMutation. Use for async state, query cache, SSR, or encountering invalidation, hydration, TanStack Vue Query migration errors.
Why this skill is useful
Provides specific commands and patterns for data fetching in Vue/Nuxt that the AI wouldn't reliably generate on its own.
What it needs
Requires bun installed locally. About 8k tokens when loaded. Last updated 2026-08-06. 204 stars on the source repository.
What this skill does
Pinia Colada - Smart Data Fetching for Vue Status: Production Ready ✅ Last Updated: 2025-11-28 Latest Version: @pinia/colada@0.17.9 Dependencies: Vue 3.5.17+, Pinia 2.2.6+ or 3.0+ --- Quick Start (5 Minutes) 1. Install Dependencies For Vue Projects: For Nuxt Projects: Why this matters: Pinia Colada requires Pinia 2.2.6+ or 3.0+ as peer dependency Nuxt module handles SSR serialization automatically Vue 3.5.17+ required for optimal reactivity 2. Set Up Pinia Colada Plugin For Vue Projects: For Nuxt Projects: CRITICAL: For Nuxt: @pinia/nuxt must be listed before @pinia/colada-nuxt Plugin must be registered after Pinia instance Configuration is optional - sensible defaults provided 3. Create First Query CRITICAL: Query key must be an array (or getter returning array) for consistent caching Query query is the async function that fetches data Throw errors in query function for proper error handling isPending is true only on initial load, isLoading includes refetches 4. Create First Mutation Why this works: onSettled runs after success or error, perfect for invalidation invalidateQueries marks matching queries as stale and refetches active ones mutate is fire-and-forget, mutateAsync returns Promise for await Mutations don't cache by default (correct behavior for writes) --- Critical Rules Always Do ✅ Include all variables used in query function in the key ✅ Throw errors in query/mutation functions for proper error handling ✅ Use useQueryCache() for invalidation in mutations ✅ Use isPending for initial load, isLoading for any loading state ✅ Await invalidateQueries() in onSettled when you need data fresh before continuing ✅ Use placeholderData for paginated queries to avoid flashing ✅ Snapshot cache with getQueryData before optimistic updates ✅ Return context from onMutate for rollback in onError ✅ Configure staleTime and gcTime at plugin level for app-wide defaults ✅ Use reusable composables for queries instead of inline useQuery Never Do ❌ Never use plain strings as keys …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills secondsky/pinia-colada