pyRPC
← Back to Blog

Vue and Svelte adapters: same contract, stack-native setup

·9 min read

@pyrpc/vue and @pyrpc/svelte wrap the same @pyrpc/client + procedure kinds. Setup follows each ecosystem’s TanStack Query conventions — we don’t invent a second provider model.

Vue

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

export const api = createPyrpcVue<Types>({ baseUrl: "http://localhost:8000" })
createApp(App).use(api.plugin).mount("#app")

// in a component
const { data } = api.greet.useQuery({ name: "Ada" })

api.plugin registers TanStack’s VueQueryPlugin.

Svelte

import { createSvelteClient } from "@pyrpc/svelte"
import type { Types } from "@pyrpc/types"

export const api = createSvelteClient<Types>({ baseUrl: "http://localhost:8000" })

// + TanStack Svelte QueryClientProvider around the app
const query = api.greet.createQuery({ name: "Ada" })

Svelte Query uses createQuery / createMutation instead of use* — we follow that naming on purpose.

Vue docs · Svelte docs