DEV Community

mohammad garmabi
mohammad garmabi

Posted on

tanstack-fetch 1.5.0 — Vue & Nuxt helpers for a TanStack Query–ready fetch client

tanstack-fetch 1.5.0 — Vue & Nuxt

tanstack-fetch 1.5.0 adds tanstack-fetch/vue: createFetchPlugin, useFetch, and useSse for Vue 3 / Nuxt.

Same client as React — return data, throw FetchError, pass Query's signal.

Not an official TanStack package.

Quick start

import { createFetch } from 'tanstack-fetch'
import { createFetchPlugin, useFetch } from 'tanstack-fetch/vue'

const api = createFetch({ baseUrl: '/api' })
app.use(createFetchPlugin({ client: api }))

// in a component — useFetch injects the client (it does not fetch data)
const api = useFetch()
await api.get('/users')
Enter fullscreen mode Exit fullscreen mode

SSE

import { createFetch } from 'tanstack-fetch/sse'
import { useSse } from 'tanstack-fetch/vue'

const api = createFetch({ plugins: ['sse-resume'] })
const { data, status, close } = useSse('/orders/stream', { client: api })
// status: connecting | connected | disconnected | error
Enter fullscreen mode Exit fullscreen mode

Nuxt name clash

import { useFetch as useFetchClient } from 'tanstack-fetch/vue'
Enter fullscreen mode Exit fullscreen mode

Bundle (gzip)

Entry Size
HTTP 4.81KB
Vue 0.78KB
SSE 5.94KB

📦 npm · 📘 Vue guide · ⭐ GitHub

Top comments (0)