mirror of
https://github.com/ArthurDanjou/trpc-nuxt.git
synced 2026-01-14 20:19:33 +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>
|
||||
</p>
|
||||
|
||||
**⚠️ Currently works on Node v16 until [this issue](https://github.com/trpc/trpc/issues/2420) gets fixed.**
|
||||
|
||||
## Install
|
||||
|
||||
```bash
|
||||
@@ -101,7 +103,7 @@ const {
|
||||
|
||||
## 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
|
||||
const headers = useClientHeaders()
|
||||
|
||||
25
package.json
25
package.json
@@ -1,8 +1,8 @@
|
||||
{
|
||||
"name": "trpc-nuxt",
|
||||
"type": "module",
|
||||
"version": "0.2.3",
|
||||
"packageManager": "pnpm@7.1.1",
|
||||
"version": "0.2.8",
|
||||
"packageManager": "pnpm@7.5.0",
|
||||
"license": "MIT",
|
||||
"main": "./dist/module.cjs",
|
||||
"types": "./dist/types.d.ts",
|
||||
@@ -28,31 +28,29 @@
|
||||
"build:playground": "nuxi build playground",
|
||||
"lint": "eslint .",
|
||||
"lint:fix": "eslint . --fix",
|
||||
"release": "bumpp --commit --push --tag && pnpm publish",
|
||||
"release": "bumpp --commit --push --tag && npm publish",
|
||||
"prepare": "nuxi prepare playground"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nuxt/kit": "^3.0.0-rc.4",
|
||||
"@trpc/client": "^9.26.0",
|
||||
"@trpc/server": "^9.26.0",
|
||||
"@vueuse/core": "^8.9.3",
|
||||
"@vueuse/nuxt": "^8.9.3",
|
||||
"@nuxt/kit": "3.0.0-rc.9",
|
||||
"@trpc/client": "^9.27.2",
|
||||
"@trpc/server": "^9.27.2",
|
||||
"dedent": "^0.7.0",
|
||||
"defu": "^6.0.0",
|
||||
"h3": "^0.7.10",
|
||||
"ohash": "^0.1.5",
|
||||
"pathe": "^0.3.0",
|
||||
"ufo": "^0.8.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@antfu/eslint-config": "^0.23.1",
|
||||
"@antfu/ni": "^0.16.2",
|
||||
"@nuxt/module-builder": "latest",
|
||||
"@nuxt/module-builder": "^0.1.7",
|
||||
"@types/dedent": "^0.7.0",
|
||||
"bumpp": "^7.2.0",
|
||||
"eslint": "^8.14.0",
|
||||
"nuxt": "3.0.0-rc.4",
|
||||
"ohash": "^0.1.0",
|
||||
"pnpm": "^7.1.1",
|
||||
"nuxt": "3.0.0-rc.9",
|
||||
"pnpm": "^7.5.0",
|
||||
"trpc-nuxt": "workspace:*",
|
||||
"zod": "^3.16.0"
|
||||
},
|
||||
@@ -61,5 +59,8 @@
|
||||
"rules": {
|
||||
"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 addHeader = () => {
|
||||
// headers.value.cookie = 'counter=69'
|
||||
headers.value.authorization = 'Bearer abcdefghijklmnop'
|
||||
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 dedent from 'dedent'
|
||||
|
||||
import { addAutoImport, addPlugin, addServerHandler, addTemplate, defineNuxtModule } from '@nuxt/kit'
|
||||
import { addImports, addPlugin, addServerHandler, addTemplate, defineNuxtModule } from '@nuxt/kit'
|
||||
|
||||
export interface ModuleOptions {
|
||||
baseURL: string
|
||||
@@ -26,16 +26,13 @@ export default defineNuxtModule<ModuleOptions>({
|
||||
const handlerPath = join(nuxt.options.buildDir, 'trpc-handler.ts')
|
||||
const trpcOptionsPath = join(nuxt.options.srcDir, 'server/trpc')
|
||||
|
||||
// Add vueuse
|
||||
nuxt.options.modules.push('@vueuse/nuxt')
|
||||
|
||||
// Final resolved configuration
|
||||
const finalConfig = nuxt.options.runtimeConfig.public.trpc = defu(nuxt.options.runtimeConfig.public.trpc, {
|
||||
baseURL: options.baseURL,
|
||||
endpoint: options.endpoint,
|
||||
})
|
||||
|
||||
addAutoImport([
|
||||
addImports([
|
||||
{ name: 'useClient', from: join(runtimeDir, 'client') },
|
||||
{ name: 'useAsyncQuery', 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 { objectHash } from 'ohash'
|
||||
import type { Ref } from 'vue'
|
||||
import { useStorage } from '@vueuse/core'
|
||||
import { useAsyncData, useNuxtApp, useState } from '#app'
|
||||
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>> {
|
||||
return useStorage('trpc-nuxt-header', initialValue)
|
||||
return useState('trpc-nuxt-header', () => initialValue)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user