mirror of
https://github.com/ArthurDanjou/trpc-nuxt.git
synced 2026-01-14 20:19:33 +01:00
Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
8168a46985 | ||
|
|
2a23f4303d | ||
|
|
ff4bbebb0b | ||
|
|
354bf5d707 | ||
|
|
e7d160ee48 | ||
|
|
9bf6d57c2c | ||
|
|
6bca1e621d |
2
.nuxtrc
Normal file
2
.nuxtrc
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
imports.autoImport=false
|
||||||
|
typescript.includeWorkspace=true
|
||||||
@@ -18,7 +18,7 @@ End-to-end typesafe APIs with [tRPC.io](https://trpc.io/) in Nuxt applications.
|
|||||||
## Install
|
## Install
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm i trpc-nuxt
|
npm i trpc-nuxt@0.3
|
||||||
```
|
```
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
|
|||||||
32
package.json
32
package.json
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "trpc-nuxt",
|
"name": "trpc-nuxt",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"version": "0.3.3",
|
"version": "0.3.5",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"main": "./dist/module.cjs",
|
"main": "./dist/module.cjs",
|
||||||
"types": "./dist/types.d.ts",
|
"types": "./dist/types.d.ts",
|
||||||
@@ -21,10 +21,11 @@
|
|||||||
"*.d.ts"
|
"*.d.ts"
|
||||||
],
|
],
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"prepublishOnly": "pnpm build",
|
|
||||||
"build": "nuxt-module-build",
|
"build": "nuxt-module-build",
|
||||||
"play": "pnpm build && nuxi dev playground",
|
"dev": "nuxi dev playground",
|
||||||
"build:playground": "nuxi build playground",
|
"dev:build": "nuxi build playground",
|
||||||
|
"dev:preview": "nuxi preview playground",
|
||||||
|
"dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
|
||||||
"lint": "eslint .",
|
"lint": "eslint .",
|
||||||
"lint:fix": "eslint . --fix",
|
"lint:fix": "eslint . --fix",
|
||||||
"release": "bumpp --commit --push --tag && npm publish",
|
"release": "bumpp --commit --push --tag && npm publish",
|
||||||
@@ -35,25 +36,24 @@
|
|||||||
"@trpc/server": "<10.0.0"
|
"@trpc/server": "<10.0.0"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@nuxt/kit": "3.0.0-rc.13",
|
"@nuxt/kit": "3.0.0",
|
||||||
"@trpc/client": "^9.27.4",
|
"@trpc/client": "^9.27.4",
|
||||||
"@trpc/server": "^9.27.4",
|
"@trpc/server": "^9.27.4",
|
||||||
"dedent": "^0.7.0",
|
"dedent": "^0.7.0",
|
||||||
"defu": "^6.1.0",
|
"defu": "^6.1.1",
|
||||||
"h3": "^0.8.6",
|
"h3": "^1.0.2",
|
||||||
"ohash": "^0.1.5",
|
"ohash": "^1.0.0",
|
||||||
"pathe": "^0.3.9",
|
"pathe": "^1.0.0",
|
||||||
"ufo": "^0.8.6"
|
"ufo": "^1.0.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@antfu/eslint-config": "^0.23.1",
|
"@antfu/eslint-config": "^0.34.0",
|
||||||
"@nuxt/module-builder": "^0.2.0",
|
"@nuxt/module-builder": "^0.2.1",
|
||||||
"@types/dedent": "^0.7.0",
|
"@types/dedent": "^0.7.0",
|
||||||
"bumpp": "^7.2.0",
|
"bumpp": "^8.2.1",
|
||||||
"eslint": "^8.25.0",
|
"eslint": "^8.25.0",
|
||||||
"nuxt": "3.0.0-rc.13",
|
"nuxt": "3.0.0",
|
||||||
"trpc-nuxt": "workspace:*",
|
"zod": "^3.20.2"
|
||||||
"zod": "^3.19.1"
|
|
||||||
},
|
},
|
||||||
"eslintConfig": {
|
"eslintConfig": {
|
||||||
"extends": "@antfu",
|
"extends": "@antfu",
|
||||||
|
|||||||
@@ -1,19 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
const counter = useCookie('counter')
|
|
||||||
counter.value = counter.value || Math.round(Math.random() * 1000)
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<h1> Counter: {{ counter || '-' }}</h1>
|
|
||||||
<button @click="counter = null">
|
|
||||||
reset
|
|
||||||
</button>
|
|
||||||
<button @click="counter--">
|
|
||||||
-
|
|
||||||
</button>
|
|
||||||
<button @click="counter++">
|
|
||||||
+
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@@ -1,4 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import { useClient, useClientHeaders, useAsyncQuery } from '#imports'
|
||||||
const client = useClient()
|
const client = useClient()
|
||||||
const headers = useClientHeaders()
|
const headers = useClientHeaders()
|
||||||
const { data: todos, pending, error, refresh } = await useAsyncQuery(['getTodos'])
|
const { data: todos, pending, error, refresh } = await useAsyncQuery(['getTodos'])
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import { useRoute, useAsyncQuery } from '#imports'
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const { data: todo, pending, error } = await useAsyncQuery(['getTodo', Number(route.params.id)])
|
const { data: todo, pending, error } = await useAsyncQuery(['getTodo', Number(route.params.id)])
|
||||||
</script>
|
</script>
|
||||||
@@ -11,8 +12,8 @@ const { data: todo, pending, error } = await useAsyncQuery(['getTodo', Number(ro
|
|||||||
{{ error.data.code }}
|
{{ error.data.code }}
|
||||||
</div>
|
</div>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
ID: {{ todo.id }} <br>
|
ID: {{ todo?.id }} <br>
|
||||||
Title: {{ todo.title }} <br>
|
Title: {{ todo?.title }} <br>
|
||||||
Completed: {{ todo.completed }}
|
Completed: {{ todo?.completed }}
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
2220
pnpm-lock.yaml
generated
2220
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -27,7 +27,7 @@ export default defineNuxtModule<ModuleOptions>({
|
|||||||
const logger = useLogger(metaName)
|
const logger = useLogger(metaName)
|
||||||
|
|
||||||
const runtimeDir = fileURLToPath(new URL('./runtime', import.meta.url))
|
const runtimeDir = fileURLToPath(new URL('./runtime', import.meta.url))
|
||||||
nuxt.options.build.transpile.push(runtimeDir, '#build/trpc-handler')
|
nuxt.options.build.transpile.push(runtimeDir)
|
||||||
|
|
||||||
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')
|
||||||
@@ -49,7 +49,7 @@ export default defineNuxtModule<ModuleOptions>({
|
|||||||
write: true,
|
write: true,
|
||||||
getContents() {
|
getContents() {
|
||||||
return dedent`
|
return dedent`
|
||||||
import { createTRPCHandler } from 'trpc-nuxt/api'
|
import { createTRPCHandler } from ${JSON.stringify(join(runtimeDir, 'api'))}
|
||||||
import * as functions from '${trpcOptionsPath}'
|
import * as functions from '${trpcOptionsPath}'
|
||||||
|
|
||||||
export default createTRPCHandler({
|
export default createTRPCHandler({
|
||||||
|
|||||||
@@ -30,7 +30,7 @@ export interface OnErrorPayload<TRouter extends AnyRouter> {
|
|||||||
error: TRPCError
|
error: TRPCError
|
||||||
type: ProcedureType | 'unknown'
|
type: ProcedureType | 'unknown'
|
||||||
path: string | undefined
|
path: string | undefined
|
||||||
req: H3Event['req']
|
req: H3Event['node']['req']
|
||||||
input: unknown
|
input: unknown
|
||||||
ctx: undefined | inferRouterContext<TRouter>
|
ctx: undefined | inferRouterContext<TRouter>
|
||||||
}
|
}
|
||||||
@@ -54,7 +54,7 @@ export function createTRPCHandler<Router extends AnyRouter>({
|
|||||||
const {
|
const {
|
||||||
req,
|
req,
|
||||||
res,
|
res,
|
||||||
} = event
|
} = event.node
|
||||||
|
|
||||||
const $url = createURL(req.url!)
|
const $url = createURL(req.url!)
|
||||||
|
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ 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 { useAsyncData, useNuxtApp, useState } from '#app'
|
import { useAsyncData, useNuxtApp, useState } from '#imports'
|
||||||
import type { router } from '~/server/trpc'
|
import type { router } from '~/server/trpc'
|
||||||
|
|
||||||
type MaybeRef<T> = T | Ref<T>
|
type MaybeRef<T> = T | Ref<T>
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ import * as trpc from '@trpc/client'
|
|||||||
import { unref } from 'vue'
|
import { unref } from 'vue'
|
||||||
import { FetchError } from 'ohmyfetch'
|
import { FetchError } from 'ohmyfetch'
|
||||||
import { useClientHeaders } from './client'
|
import { useClientHeaders } from './client'
|
||||||
import { defineNuxtPlugin, useRequestHeaders, useRuntimeConfig } from '#app'
|
import { defineNuxtPlugin, useRequestHeaders, useRuntimeConfig } from '#imports'
|
||||||
import type { router } from '~/server/trpc'
|
import type { router } from '~/server/trpc'
|
||||||
|
|
||||||
declare type AppRouter = typeof router
|
declare type AppRouter = typeof router
|
||||||
|
|||||||
Reference in New Issue
Block a user