Pinia + This Plugin: An Unbeatable Combo

Pinia basics

Pinia is the official Vue state‑management library. Stores are defined with defineStore and can use the Composition API. Example:

export const useUserStore = defineStore('user', () => {
  const profile = ref<User | null>(null)
  async function fetchUser(id: number) {
    profile.value = await axios.get(`/api/user/${id}`)
  }
  return { profile, fetchUser }
})

In a component the store can be used directly:

<script setup>
const user = useUserStore()
await callWhenReady(user.fetchUser, route.params.id)
</script>

<template>
  <div v-if="user.profile">{{ user.profile.name }}</div>
</template>

Pinia itself does not provide loading, error, retry, caching, polling, optimistic updates, or background‑refresh utilities, which leads to repetitive boiler‑plate code.

Pinia Colada

Pinia Colada is a smart data‑fetching layer designed specifically for Vue + Pinia. It packages request deduplication, in‑memory caching, background refresh, invalidation, retry, and optimistic updates with rollback into a single Pinia plugin.

Request deduplication & in‑memory cache

Background refresh, invalidation, retry

Optimistic updates with onMutate, onError, onSettled for rollback

Query result stored as Pinia state, visible in the Pinia DevTools panel

Plugin‑able and composable, zero dependencies besides Pinia

Core size ~2 kB, tree‑shakable, 100 % TypeScript

5‑minute quick start

1. Install

npm i pinia @pinia/colada

2. Register the plugin

// main.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { PiniaColada } from '@pinia/colada'

const pinia = createPinia()
pinia.use(PiniaColada)
createApp(App).use(pinia).mount('#app')

3. Query directly in a component

<script setup>
import { useQuery } from '@pinia/colada'
const { data, isLoading, error } = useQuery({
  key: ['todos'],
  query: () => fetch('/api/todos').then(r => r.json()),
  staleTime: 5000 // no duplicate request within 5 s
})
</script>

<template>
  <div v-if="isLoading">Loading…</div>
  <div v-else-if="error">Oops: {{ error.message }}</div>
  <ul v-else>
    <li v-for="t in data" :key="t.id">{{ t.title }}</li>
  </ul>
</template>

4. Optimistic mutation

const { mutate, isPending } = useMutation({
  mutation: (newTodo: string) => axios.post('/api/todos', { title: newTodo }),
  onMutate: async (newTodo) => {
    const prev = queryClient.getQueryData(['todos'])
    queryClient.setQueryData(['todos'], old => [...old, { id: Date.now(), title: newTodo }])
    return { prev }
  },
  onError: (err, _, context) => {
    queryClient.setQueryData(['todos'], context.prev)
  }
})

Core APIs

useQuery – fetch data (list, detail, search)

useMutation – modify data (create, edit, delete)

defineQuery / defineMutation – reuse inside a Pinia store, enabling shared queries across components

queryCache.invalidateQueries – manual cache invalidation, e.g., after a mutation

Comparison with TanStack Query (Vue)

Ecosystem focus : TanStack Query is framework‑agnostic; Pinia Colada is built for Vue + Pinia.

State ownership : TanStack Query keeps cache separate from Pinia; Pinia Colada stores query results directly in Pinia state.

Learning curve : TanStack Query requires understanding queryClient and QueryCache; Pinia Colada uses familiar ref, computed, watch APIs.

Plugin extension : TanStack Query provides a queryClient plugin; Pinia Colada is a Pinia plugin that integrates seamlessly with existing stores.

Bundle size : ~13 kB core for TanStack Query, ~2 kB core for Pinia Colada.

SSR support : Both support server‑side rendering; Pinia Colada automatically reuses Pinia’s SSR injection.

For projects that need a single data‑fetching API across React and Vue, TanStack Query remains a safe choice. For Vue‑centric projects already using Pinia, Pinia Colada offers a lighter, more integrated solution.