connect-query-vue

Vue adapter for connect-query-core, bringing Connect RPC support to @tanstack/vue-query.

This package is inspired by connectrpc/connect-query-es#324, which tracks extending connect-query-es to frameworks beyond React. It depends on @connectrpc/connect-query-core and provides Vue-specific composables on top of it.

Installation

npm install connect-query-vue @connectrpc/connect-query-core @connectrpc/connect @bufbuild/protobuf @tanstack/vue-query vue

Usage

Setup

Provide a Connect transport in your root component:

<!-- App.vue -->
<script setup lang="ts">
import { provideTransport } from "connect-query-vue";
import { createConnectTransport } from "@connectrpc/connect-web";

provideTransport(createConnectTransport({ baseUrl: "https://demo.connectrpc.com" }));
</script>

useQuery

<script setup lang="ts">
import { useQuery } from "connect-query-vue";
import { ElizaService } from "./gen/eliza_pb";

const { data, isPending } = useQuery(ElizaService.say, { sentence: "Hello" });
</script>

<template>
  <div v-if="isPending">Loading...</div>
  <div v-else>{{ data?.sentence }}</div>
</template>

API

useQuery(methodSig, input?, options?)

A composable wrapper around @tanstack/vue-query's useQuery. Automatically builds the query key and fetcher using connect-query-core.

useTransport()

Returns the Connect transport provided via provideTransport().

API Coverage vs connect-query (official)

Implements 100% (10/10) of the exports from the official @connectrpc/connect-query.

| Status | API | | -------------- | --------------------------------- | | ✅ Implemented | UseInfiniteQueryOptions | | ✅ Implemented | UseMutationOptions | | ✅ Implemented | UseQueryOptions | | ✅ Implemented | provideTransport | | ✅ Implemented | useInfiniteQuery | | ✅ Implemented | useMutation | | ✅ Implemented | useQuery | | ✅ Implemented | useSuspenseInfiniteQuery | | ✅ Implemented | useSuspenseQuery | | ✅ Implemented | useTransport | | 🔵 Vue-only | UseSuspenseInfiniteQueryOptions |

Auto-generated by vp run update-coverage.

Note on TransportProvider: In React, TransportProvider is a JSX component that wraps the component tree. In Vue, this pattern is not needed — use provideTransport() inside setup() instead. It serves the same purpose using Vue's native provide/inject mechanism, and is listed as 🔵 Vue-only above.

Development

# Install dependencies
vp install

# Run tests
vp test

# Build
vp pack

Related

• connectrpc/connect-query-es — React adapter (official)
• @connectrpc/connect-query-core — Framework-agnostic core