Pinia Colada Skilld

This covers Pinia Colada, Vue's smart data fetching layer that handles query caching, background refreshes, and optimistic updates without the boilerplate. You'll want it anytime you're working with async data in Vue, especially if you're tired of manually coordinating loading states across components. The big thing to know: it splits status into two refs (data state and async operation state), which can trip you up initially but makes sense once you're handling concurrent requests. The skill includes breaking changes across versions, so it's handy for debugging type errors or understanding why `isFetching` became `isLoading`. Use `defineQuery()` for shared state and lean on `refresh()` over `refetch()` unless you specifically need to bypass the cache.

skills.sh installs: 142
GitHub stars: 165
last updated: Jun 3, 2026

View on GitHub

Install

$ npx -y skills add harlan-zw/vue-ecosystem-skills --skill pinia-colada-skilld --agent claude-code

Installs into .claude/skills of the current project.

Files

@pinia/colada 1.4.5

The smart data fetching layer for Vue.js, built on Pinia. Queries read and cache data (useQuery), mutations write data (useMutation), everything lives in Pinia stores (useQueryCache, useMutationCache).

Docs: https://pinia-colada.esm.dev
API types: dist/index.d.mts in the prepared package source
Runtime exports: dist/index.mjs:1487
Peers: vue ^3.5.41, pinia ^2.2.6 || ^3.0.0 || ^4.0.2 (pinia 4 allowed since 1.4.1, package.json:91-94)
Bundled codemods: codemods/rules/*.yaml in the package

Setup

npm install pinia @pinia/colada

import { createPinia } from 'pinia'
import { PiniaColada } from '@pinia/colada'

const app = createApp(App)
app.use(createPinia())
// install after pinia; the options object is required for correct typing
app.use(PiniaColada, {
  queryOptions: { staleTime: 60_000 },
  plugins: [],
})

Global options go under queryOptions / mutationOptions (dist/index.d.mts:1601-1618).