docs

apps/content/content/docs/client/vue-colada.mdx

@@ -0,0 +1,71 @@
+---
+title: Vue Colada
+description: Simplify oRPC usage with minimal integration Pinia Colada
+---
+
+## Installation
+
+```package-install
+@orpc/client @orpc/vue-colada @pinia/colada
+```
+
+## Setup
+
+```ts twoslash
+import { createORPCVueColadaUtils } from '@orpc/vue-colada';
+import { createORPCClient } from '@orpc/client';
+import { ORPCLink } from '@orpc/client/fetch';
+import type { router } from 'examples/server';
+
+const orpcLink = new ORPCLink({
+  url: 'http://localhost:3000/api',
+  // fetch: optional override for the default fetch function
+  // headers: provide additional headers
+});
+
+// Create an ORPC client
+export const client = createORPCClient<typeof router>(orpcLink);
+
+// Create Vue Query utilities for ORPC
+export const orpc = createORPCVueColadaUtils(client);
+
+// @noErrors
+orpc.getting.
+//           ^|
+```
+
+## Multiple ORPC Instances
+
+To prevent conflicts when using multiple ORPC instances, you can provide a unique base path to `createORPCVueColadaUtils`.
+
+```tsx twoslash
+import { createORPCVueColadaUtils } from '@orpc/vue-colada'
+
+// Create separate ORPC instances with unique base paths
+const userORPC = createORPCVueColadaUtils('fake-client' as any, ['__user-api__'])
+const postORPC = createORPCVueColadaUtils('fake-client' as any, ['__post-api__'])
+```
+
+This ensures that each instance manages its own set of query keys and avoids any conflicts.
+
+## Usage
+
+### Standard Queries and Mutations
+
+```ts twoslash
+import { useMutation, useQuery, useQueryCache } from '@pinia/colada'
+import { orpc } from 'examples/vue-colada'
+
+// Fetch data
+const { data: gettingData } = useQuery(orpc.getting.queryOptions({ input: { name: 'unnoq' } }))
+
+// Perform mutations
+const { mutate: postMutate } = useMutation(orpc.post.create.mutationOptions())
+
+// Invalidate queries
+const queryCache = useQueryCache()
+queryCache.invalidateQueries({ queryKey: orpc.key() }) // Invalidate all queries
+queryCache.invalidateQueries({ queryKey: orpc.post.find.key({ input: { id: 'example' } }) }) // Specific queries
+```
+
+> **Note**: This library enhances [Pinia Colada](https://pinia-colada.esm.dev/) by managing keys and functions for you, providing a seamless developer experience.

apps/content/examples/vue-colada.ts

@@ -0,0 +1,5 @@
+import type { RouterClient } from '@orpc/server'
+import type { router } from 'examples/server'
+import { createORPCVueColadaUtils } from '@orpc/vue-colada'
+
+export const orpc = createORPCVueColadaUtils({} as RouterClient<typeof router /** or contract router */, unknown>)

apps/content/package.json

@@ -28,6 +28,7 @@
     "@orpc/react": "workspace:*",
     "@orpc/react-query": "workspace:*",
     "@orpc/server": "workspace:*",
+    "@orpc/vue-colada": "workspace:*",
     "@orpc/vue-query": "workspace:*",
     "@orpc/zod": "workspace:*",
     "@tanstack/react-query": "^5.62.7",

apps/content/tsconfig.json

@@ -32,6 +32,7 @@
     { "path": "../../packages/react" },
     { "path": "../../packages/react-query" },
     { "path": "../../packages/vue-query" },
+    { "path": "../../packages/vue-colada" },
     { "path": "../../packages/zod" },
     { "path": "../../packages/next" }
   ],

packages/vue-colada/src/index.ts

@@ -6,4 +6,4 @@ export * from './utils-general'
 export * from './utils-procedure'
 export * from './utils-router'
 
-export const createORPCVueQueryUtils = createRouterUtils
+export const createORPCVueColadaUtils = createRouterUtils

packages/vue-colada/tests/helpers.ts

@@ -6,7 +6,7 @@ import { PiniaColada } from '@pinia/colada'
 import { mount as baseMount } from '@vue/test-utils'
 import { createPinia } from 'pinia'
 import { z } from 'zod'
-import { createORPCVueQueryUtils } from '../src'
+import { createORPCVueColadaUtils } from '../src'
 
 export const orpcServer = os
 
@@ -102,7 +102,7 @@ const orpcLink = new ORPCLink({
 
 export const orpcClient = createORPCClient<typeof appRouter, { batch?: boolean } | undefined>(orpcLink)
 
-export const orpc = createORPCVueQueryUtils(orpcClient)
+export const orpc = createORPCVueColadaUtils(orpcClient)
 
 export const mount: typeof baseMount = (component, options) => {
   return baseMount(component, {