Skip to content


Loaders that use @pinia/colada under the hood. These loaders provide a more efficient way to have asynchronous state with cache, ssr support and more.

The key used in these loaders are directly passed to useQuery() from @pinia/colada and are therefore invalidated by useMutation() calls.


Pinia Colada is Experimental (like data loaders). Feedback is very welcome to shape the future of data loaders in Vue Router.


Follow the installation instructions in @pinia/colada.


<script lang="ts">
import { defineColadaLoader } from 'unplugin-vue-router/data-loaders/pinia-colada'
import { getUserById } from '../api'

export const useUserData = defineColadaLoader({
  async query(to, { signal }) {
    return getUserById(, { signal })
  key: (to) => ['users',],
  // Keep the data "fresh" 10 seconds to avoid fetching the same data too often
  staleTime: 10000,

<script lang="ts" setup>
const route = useRoute('/users/[id]')

const {
} = useUserData()

    <h1>Pinia Colada Loader Example</h1>
    <pre>User: {{ }}</pre>


      <button @click="refresh()">Refresh</button>
      <button @click="reload()">Refetch</button>

    <RouterLink :to="{ params: { id: Number( || 0 - 1 } }"
    <RouterLink :to="{ params: { id: Number( || 0 + 1 } }"


      <code>status: {{ status }}</code>
      <br />
      <code>isLoading: {{ isLoading }}</code>
    <pre v-if="error">Error: {{ error }}</pre>
    <pre v-else>{{ user == null ? String(user) : user }}</pre>


If you are using unplugin-vue-router, you can pass a route name to defineColadaLoader to get typed routes in the query function.

export const useUserData = defineColadaLoader('/users/[id]', {
  // ...

Refresh by default

To avoid unnecessary frequent refreshes, Pinia Colada refreshes the data when navigating (instead of refetching). Change the staleTime option to control how often the data should be refreshed, e.g. setting it to 0 will refresh the data every time the route changes.

Route tracking

The query function tracks what is used in the to parameter and will only refresh the data if tracked properties change. This means that if you use in the query function, it will only refetch the data if the id parameter changes but not if other properties like to.query, to.hash or even to.params.other change. To make sure the data is updated, it will still refresh in these scenarios. Configure the staleTime option to control how often the data should be refreshed.



Unresolved questions

Released under the MIT License.