Tanstack Vue Query Skilld

This one's essential if you're using TanStack Query (formerly React Query) in Vue apps. It covers the composables for async data fetching, caching, and sync across components. The API changes section is thorough, including the breaking change where useQueries now returns a Ref instead of Reactive, plus newer features like reactive getter functions and injection context support. Best practices are solid: use queryOptions for type safety, pass reactive values directly into queryKey arrays, and treat query keys like dependency arrays. The ESLint guidance alone will save you from common pitfalls like recreating QueryClient instances in components or over-subscribing with rest destructuring.

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

View on GitHub

Install

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

Installs into .claude/skills of the current project.

Files

@tanstack/vue-query@5.103.2

Async data hooks for Vue. Version 5.103.2, prepared source at input/source. Peer deps: vue ^2.6.0 || ^3.3.0; Vue 2 needs @vue/composition-api (optional peer) (package.json:56-59). Re-exports everything from @tanstack/query-core 5.103.2, so keepPreviousData, skipToken, focusManager, onlineManager, hydration utils, and observer classes import from @tanstack/vue-query directly (src/index.ts:1).

Setup

Install the plugin once per app. It creates (or accepts) a QueryClient, provides it app-wide, and mounts/unmounts it (src/vueQueryPlugin.ts:74-154):

import { createApp } from 'vue'
import { QueryClient, VueQueryPlugin } from '@tanstack/vue-query'

const app = createApp(App)

// Option A: pass your own client (required for SSR — one fresh client per request)
const queryClient = new QueryClient()
app.use(VueQueryPlugin, { queryClient })

// Option B: let the plugin build one with your defaults
app.use(VueQueryPlugin, {
  queryClientConfig: { defaultOptions: { queries: { staleTime: 5 * 1000 } } },
})

SKILL.md on GitHub