pyRPC
← Back to Blog

The Vue adapter: same contract, Vue-native patterns

·8 min read

The @pyrpc/vue adapter follows the same architecture as React — one transport, TanStack Query on top — but uses Vue-native patterns: plugins instead of providers, composables instead of hooks.

Setup

import { createPyrpcVue } from "@pyrpc/vue"
import type { Types } from "@pyrpc/types"
import { procedureKinds } from "@pyrpc/types"

const api = createPyrpcVue<Types>({
  baseUrl: "http://localhost:8000",
  kinds: procedureKinds,
})

createPyrpcVue returns an object with a plugin property that registers TanStack's VueQueryPlugin.

Plugin instead of Provider

// main.ts
import { createApp } from "vue"
import { api } from "./lib/pyrpc"

const app = createApp(App)
app.use(api.plugin)
app.mount("#app")

One app.use(api.plugin) call. No wrapper components. The plugin handles QueryClient setup internally.

Composables, not hooks

<script setup>
import { api } from "@/lib/pyrpc"

const { data } = api.get_user.useQuery({ userId: 1 })
</script>

<template>
  <p>{{ data?.name ?? "Loading..." }}</p>
</template>

Vue uses Composition API composables. Same kind-based resolution: queries get useQuery, mutations get useMutation.

What stays the same vs React

  • One transport: createClient underneath
  • Same Types and procedureKinds
  • Same query key format: ["pyrpc", procedureName, input?]
  • Same kind-based hook resolution

What is different

  • Plugin instead of Provider component
  • Vue 3 Composition API instead of React hooks
  • Standard Vue templates instead of JSX
  • reactive() and computed() for derived state

The adapter is intentionally thin. If you understand the React adapter, you understand this one — the framework-specific part is just the integration pattern.

Vue docs · Vue and Svelte adapters