pinia-colada-plugin-recently-successful

A Pinia Colada plugin that adds a recentlySuccessful ref to mutations.

• ✅ Adds recentlySuccessful: ShallowRef<boolean> to useMutation() results
• ⏱️ Turns true on success, then auto-resets after a configurable duration
• 🧯 Timer-safe: ignores out-of-order mutation completions

Installation

pnpm add pinia-colada-plugin-recently-successful

Usage

Register the plugin when installing Pinia Colada:

import { PiniaColada } from '@pinia/colada'
import { createPinia } from 'pinia'
import { PiniaColadaRecentlySuccessfulPlugin } from 'pinia-colada-plugin-recently-successful'
import { createApp } from 'vue'

import App from './App.vue'

const app = createApp(App)
const pinia = createPinia()

app.use(pinia)
app.use(PiniaColada, {
  plugins: [PiniaColadaRecentlySuccessfulPlugin()],
})

app.mount('#app')

Then, in a mutation:

import { useMutation } from '@pinia/colada'

const { mutate, recentlySuccessful } = useMutation({
  mutation: async () => {
    // ...
  },
})

await mutate()

// `recentlySuccessful.value` becomes true on success,
// then flips back to false after the configured duration.

Configuration

You can configure the duration globally (plugin option) and/or per mutation.

Duration precedence:

1. Per-mutation recentlySuccessfulDuration
2. Plugin recentlySuccessfulDuration
3. Default: 2000

| Option | Type | Default | Description | | :--- | :--- | :--- | :--- | | recentlySuccessfulDuration | number | 2000 | Duration in milliseconds that recentlySuccessful stays true after a successful mutation. |

Global configuration

PiniaColadaRecentlySuccessfulPlugin({
  recentlySuccessfulDuration: 3000,
})

Per-mutation configuration

useMutation({
  recentlySuccessfulDuration: 500,
  mutation: async () => {
    // ...
  },
})

Sponsors

License

MIT License © 2026-PRESENT Estéban Soubiran