mirror of
https://github.com/ArthurDanjou/trpc-nuxt.git
synced 2026-01-23 00:15:02 +01:00
Compare commits
29 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
cdf29bee67 | ||
|
|
d3d35404b1 | ||
|
|
e57c919157 | ||
|
|
d0fffbbc64 | ||
|
|
433d5ada46 | ||
|
|
5d180460af | ||
|
|
8991148d39 | ||
|
|
dd05285d65 | ||
|
|
d058ff241a | ||
|
|
fb4894e264 | ||
|
|
186faff140 | ||
|
|
b9cdb228b7 | ||
|
|
1e67434a8f | ||
|
|
019bb20e50 | ||
|
|
695ce4c56e | ||
|
|
38649b7023 | ||
|
|
5cfef32baa | ||
|
|
8497289c65 | ||
|
|
224c4b317b | ||
|
|
d5d6780ca8 | ||
|
|
252d0f6692 | ||
|
|
d022710591 | ||
|
|
a926968f13 | ||
|
|
a8eba5ab8d | ||
|
|
5871528d67 | ||
|
|
def9d0b19d | ||
|
|
34f50fc4d6 | ||
|
|
9fe1469eba | ||
|
|
e48d7cd42c |
@@ -15,6 +15,8 @@ End-to-end typesafe APIs with [tRPC.io](https://trpc.io/) in Nuxt applications.
|
|||||||
</figure>
|
</figure>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
**⚠️ Currently works on Node v16 until [this issue](https://github.com/trpc/trpc/issues/2420) gets fixed.**
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
@@ -101,7 +103,7 @@ const {
|
|||||||
|
|
||||||
## useClientHeaders
|
## useClientHeaders
|
||||||
|
|
||||||
A composable that lets you add additional properties to pass to the tRPC Client. It uses `useStorage` from [@vueuse/core](https://vueuse.org/core/usestorage).
|
A composable that lets you add additional properties to pass to the tRPC Client. It uses `useState` from [nuxt 3](https://v3.nuxtjs.org/api/composables/use-state).
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
const headers = useClientHeaders()
|
const headers = useClientHeaders()
|
||||||
|
|||||||
25
package.json
25
package.json
@@ -1,8 +1,8 @@
|
|||||||
{
|
{
|
||||||
"name": "trpc-nuxt",
|
"name": "trpc-nuxt",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"version": "0.2.3",
|
"version": "0.2.8",
|
||||||
"packageManager": "pnpm@7.1.1",
|
"packageManager": "pnpm@7.5.0",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"main": "./dist/module.cjs",
|
"main": "./dist/module.cjs",
|
||||||
"types": "./dist/types.d.ts",
|
"types": "./dist/types.d.ts",
|
||||||
@@ -28,31 +28,29 @@
|
|||||||
"build:playground": "nuxi build playground",
|
"build:playground": "nuxi build playground",
|
||||||
"lint": "eslint .",
|
"lint": "eslint .",
|
||||||
"lint:fix": "eslint . --fix",
|
"lint:fix": "eslint . --fix",
|
||||||
"release": "bumpp --commit --push --tag && pnpm publish",
|
"release": "bumpp --commit --push --tag && npm publish",
|
||||||
"prepare": "nuxi prepare playground"
|
"prepare": "nuxi prepare playground"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@nuxt/kit": "^3.0.0-rc.4",
|
"@nuxt/kit": "3.0.0-rc.9",
|
||||||
"@trpc/client": "^9.26.0",
|
"@trpc/client": "^9.27.2",
|
||||||
"@trpc/server": "^9.26.0",
|
"@trpc/server": "^9.27.2",
|
||||||
"@vueuse/core": "^8.9.3",
|
|
||||||
"@vueuse/nuxt": "^8.9.3",
|
|
||||||
"dedent": "^0.7.0",
|
"dedent": "^0.7.0",
|
||||||
"defu": "^6.0.0",
|
"defu": "^6.0.0",
|
||||||
"h3": "^0.7.10",
|
"h3": "^0.7.10",
|
||||||
|
"ohash": "^0.1.5",
|
||||||
"pathe": "^0.3.0",
|
"pathe": "^0.3.0",
|
||||||
"ufo": "^0.8.5"
|
"ufo": "^0.8.5"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@antfu/eslint-config": "^0.23.1",
|
"@antfu/eslint-config": "^0.23.1",
|
||||||
"@antfu/ni": "^0.16.2",
|
"@antfu/ni": "^0.16.2",
|
||||||
"@nuxt/module-builder": "latest",
|
"@nuxt/module-builder": "^0.1.7",
|
||||||
"@types/dedent": "^0.7.0",
|
"@types/dedent": "^0.7.0",
|
||||||
"bumpp": "^7.2.0",
|
"bumpp": "^7.2.0",
|
||||||
"eslint": "^8.14.0",
|
"eslint": "^8.14.0",
|
||||||
"nuxt": "3.0.0-rc.4",
|
"nuxt": "3.0.0-rc.9",
|
||||||
"ohash": "^0.1.0",
|
"pnpm": "^7.5.0",
|
||||||
"pnpm": "^7.1.1",
|
|
||||||
"trpc-nuxt": "workspace:*",
|
"trpc-nuxt": "workspace:*",
|
||||||
"zod": "^3.16.0"
|
"zod": "^3.16.0"
|
||||||
},
|
},
|
||||||
@@ -61,5 +59,8 @@
|
|||||||
"rules": {
|
"rules": {
|
||||||
"no-console": "warn"
|
"no-console": "warn"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
"volta": {
|
||||||
|
"node": "16.14.2"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ const headers = useClientHeaders()
|
|||||||
const { data: todos, pending, error, refresh } = await useAsyncQuery(['getTodos'])
|
const { data: todos, pending, error, refresh } = await useAsyncQuery(['getTodos'])
|
||||||
|
|
||||||
const addHeader = () => {
|
const addHeader = () => {
|
||||||
// headers.value.cookie = 'counter=69'
|
headers.value.authorization = 'Bearer abcdefghijklmnop'
|
||||||
console.log(headers.value)
|
console.log(headers.value)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
3172
pnpm-lock.yaml
generated
3172
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -3,7 +3,7 @@ import { join, resolve } from 'pathe'
|
|||||||
import { defu } from 'defu'
|
import { defu } from 'defu'
|
||||||
import dedent from 'dedent'
|
import dedent from 'dedent'
|
||||||
|
|
||||||
import { addAutoImport, addPlugin, addServerHandler, addTemplate, defineNuxtModule } from '@nuxt/kit'
|
import { addImports, addPlugin, addServerHandler, addTemplate, defineNuxtModule } from '@nuxt/kit'
|
||||||
|
|
||||||
export interface ModuleOptions {
|
export interface ModuleOptions {
|
||||||
baseURL: string
|
baseURL: string
|
||||||
@@ -26,16 +26,13 @@ export default defineNuxtModule<ModuleOptions>({
|
|||||||
const handlerPath = join(nuxt.options.buildDir, 'trpc-handler.ts')
|
const handlerPath = join(nuxt.options.buildDir, 'trpc-handler.ts')
|
||||||
const trpcOptionsPath = join(nuxt.options.srcDir, 'server/trpc')
|
const trpcOptionsPath = join(nuxt.options.srcDir, 'server/trpc')
|
||||||
|
|
||||||
// Add vueuse
|
|
||||||
nuxt.options.modules.push('@vueuse/nuxt')
|
|
||||||
|
|
||||||
// Final resolved configuration
|
// Final resolved configuration
|
||||||
const finalConfig = nuxt.options.runtimeConfig.public.trpc = defu(nuxt.options.runtimeConfig.public.trpc, {
|
const finalConfig = nuxt.options.runtimeConfig.public.trpc = defu(nuxt.options.runtimeConfig.public.trpc, {
|
||||||
baseURL: options.baseURL,
|
baseURL: options.baseURL,
|
||||||
endpoint: options.endpoint,
|
endpoint: options.endpoint,
|
||||||
})
|
})
|
||||||
|
|
||||||
addAutoImport([
|
addImports([
|
||||||
{ name: 'useClient', from: join(runtimeDir, 'client') },
|
{ name: 'useClient', from: join(runtimeDir, 'client') },
|
||||||
{ name: 'useAsyncQuery', from: join(runtimeDir, 'client') },
|
{ name: 'useAsyncQuery', from: join(runtimeDir, 'client') },
|
||||||
{ name: 'useClientHeaders', from: join(runtimeDir, 'client') },
|
{ name: 'useClientHeaders', from: join(runtimeDir, 'client') },
|
||||||
|
|||||||
@@ -9,7 +9,6 @@ import type { ProcedureRecord, inferHandlerInput, inferProcedureInput, inferProc
|
|||||||
import type { TRPCClient, TRPCClientErrorLike } from '@trpc/client'
|
import type { TRPCClient, TRPCClientErrorLike } from '@trpc/client'
|
||||||
import { objectHash } from 'ohash'
|
import { objectHash } from 'ohash'
|
||||||
import type { Ref } from 'vue'
|
import type { Ref } from 'vue'
|
||||||
import { useStorage } from '@vueuse/core'
|
|
||||||
import { useAsyncData, useNuxtApp, useState } from '#app'
|
import { useAsyncData, useNuxtApp, useState } from '#app'
|
||||||
import type { router } from '~/server/trpc'
|
import type { router } from '~/server/trpc'
|
||||||
|
|
||||||
@@ -79,5 +78,5 @@ export function useClient(): TRPCClient<AppRouter> {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function useClientHeaders(initialValue: MaybeRef<Record<string, any>> = {}): Ref<Record<string, any>> {
|
export function useClientHeaders(initialValue: MaybeRef<Record<string, any>> = {}): Ref<Record<string, any>> {
|
||||||
return useStorage('trpc-nuxt-header', initialValue)
|
return useState('trpc-nuxt-header', () => initialValue)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user