Skip to content

Installation

Install Pinia Colada alongside Pinia:

bash
# or pnpm, or yarn, etc
npm i @pinia/colada

Then, install the plugin in your application:

ts
import { 
createApp
} from 'vue'
import
App
from './App.vue'
import {
createPinia
} from 'pinia'
import {
PiniaColada
} from '@pinia/colada'
const
app
=
createApp
(
App
)
const
pinia
=
createPinia
()
app
.
use
(
pinia
)
app
.
use
(
PiniaColada
, {
// Optionally provide global options here for queries
queryOptions
: {
gcTime
: 300_000, // 5 minutes, the default
}, })

Pinia Colada Devtools

devtools-screenshot

Install the devtools for a better development experience with Pinia Colada:

bash
# or pnpm, or yarn, etc
npm i -D @pinia/colada-devtools

Then simply put the component in your App.vue (root component):

vue
<script setup lang="ts">
import { PiniaColadaDevtools } from '@pinia/colada-devtools'

// ...
</script>

<template>
  <main>
    <!-- Your app content here -->
  </main>

  <PiniaColadaDevtools  />
</template>

Keeping devtools in production

By default, the devtools are stripped off in production builds. You can override this with :disabled="false":

template
<PiniaColadaDevtools :disabled="false" />

Plugins

Pinia Colada comes with a few plugins that you can use to enhance Pinia Colada's functionality:

ts
import { 
PiniaColada
,
PiniaColadaQueryHooksPlugin
} from '@pinia/colada'
app
.
use
(
PiniaColada
, {
plugins
: [
PiniaColadaQueryHooksPlugin
({
// ... }), ], })

Released under the MIT License.