feat: add file routing option

examples/custom/.gitignore

@@ -0,0 +1,7 @@
+node_modules
+*.log*
+.nuxt
+.nitro
+.cache
+.output
+.env

examples/custom/README.md

@@ -0,0 +1,31 @@
+# dev playground
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+pnpm install
+```
+
+## Development Server
+
+Start the development server on http://localhost:3000
+
+```bash
+pnpm dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+pnpm build
+```
+
+Locally preview production build:
+
+```bash
+pnpm preview
+```

examples/custom/app.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <NuxtPage />
+  </div>
+</template>

examples/custom/nuxt.config.ts

@@ -0,0 +1,7 @@
+// https://v3.nuxtjs.org/api/configuration/nuxt.config
+export default defineNuxtConfig({
+  modules: ['trpc-nuxt'],
+  trpc: {
+    enableFileRouting: false
+  }
+})

examples/custom/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "custom",
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview"
+  },
+  "dependencies": {
+    "@trpc/client": "10.0.0-rc.4",
+    "@trpc/server": "10.0.0-rc.4",
+    "superjson": "^1.11.0",
+    "trpc-nuxt": "workspace:*",
+    "zod": "^3.19.1"
+  },
+  "devDependencies": {
+    "nuxt": "3.0.0-rc.13"
+  }
+}

examples/custom/pages/index.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+const { $client } = useNuxtApp()
+// const headers = useClientHeaders()
+
+// const addHeader = () => {
+//   headers.value.authorization = 'Bearer abcdefghijklmnop'
+//   console.log(headers.value)
+// }
+
+const addTodo = async () => {
+  const title = Math.random().toString(36).slice(2, 7)
+
+  try {
+    const x = await $client.todo.addTodo.mutate({
+      id: Date.now(),
+      userId: 69,
+      title,
+      completed: false
+    })
+    console.log(x.data.value)
+  } catch (e) {
+    console.log(e)
+  }
+}
+
+const { data: todos, pending, error, refresh } = await $client.todo.getTodos.query(undefined, {
+  trpc: {
+    abortOnUnmount: true
+  }
+})
+</script>
+
+<template>
+  <div>
+    <div v-if="pending">
+      Loading...
+    </div>
+    <div v-else-if="error?.data?.code">
+      Error: {{ error.data.code }}
+    </div>
+    <div v-else>
+      <ul>
+        <li v-for="t in todos?.slice(0, 10)" :key="t.id">
+          <NuxtLink :class="{ completed: t.completed }" :to="`/todo/${t.id}`">
+            Title: {{ t.title }}
+          </NuxtLink>
+        </li>
+      </ul>
+      <button @click="addTodo">
+        Add Todo
+      </button>
+      <button @click="() => refresh()">
+        Refresh
+      </button>
+    </div>
+  </div>
+</template>
+
+<style>
+a {
+  text-decoration: none;
+}
+
+.completed {
+  text-decoration: line-through;
+}
+</style>

examples/custom/pages/todo/[id].vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const route = useRoute()
+const { $client } = useNuxtApp()
+const { data: todo, pending, error } = await $client.todo.getTodo.query(Number(route.params.id))
+</script>
+
+<template>
+  <div v-if="pending">
+    Loading...
+  </div>
+  <div v-else-if="error?.data?.code">
+    {{ error.data.code }}
+  </div>
+  <div v-else>
+    ID: {{ todo?.id }} <br>
+    Title: {{ todo?.title }} <br>
+    Completed: {{ todo?.completed }}
+  </div>
+</template>

examples/custom/plugins/trpc-client.ts

@@ -0,0 +1,27 @@
+import { httpBatchLink, loggerLink } from '@trpc/client'
+import { createTRPCNuxtProxyClient } from 'trpc-nuxt/client'
+import superjson from 'superjson'
+import { AppRouter } from '~~/server/trpc/routers'
+
+export default defineNuxtPlugin(() => {
+  const client = createTRPCNuxtProxyClient<AppRouter>({
+    transformer: superjson,
+    links: [
+      // adds pretty logs to your console in development and logs errors in production
+      loggerLink({
+        enabled: opts =>
+          process.env.NODE_ENV === 'development' ||
+          (opts.direction === 'down' && opts.result instanceof Error)
+      }),
+      httpBatchLink({
+        url: 'http://localhost:3000/api/trpc'
+      })
+    ]
+  })
+
+  return {
+    provide: {
+      client
+    }
+  }
+})

examples/custom/server/api/trpc/[trpc].ts

@@ -0,0 +1,23 @@
+import { createNuxtApiHandler } from 'trpc-nuxt/handler'
+import { appRouter } from '@/server/trpc/routers'
+import { createContext } from '@/server/trpc/context'
+
+export default createNuxtApiHandler({
+  router: appRouter,
+  /**
+   * @link https://trpc.io/docs/context
+   */
+  createContext,
+  onError ({ error }) {
+    if (error.code === 'INTERNAL_SERVER_ERROR') {
+      // send to bug reporting
+      console.error('Something went wrong', error)
+    }
+  }
+  /**
+   * @link https://trpc.io/docs/caching#api-response-caching
+   */
+  // responseMeta() {
+  //   // ...
+  // },
+})

examples/custom/server/trpc/context.ts

@@ -0,0 +1,17 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import type { inferAsyncReturnType } from '@trpc/server'
+import type { H3Event } from 'h3'
+
+export type Context = inferAsyncReturnType<typeof createContext>
+
+/**
+ * Creates context for an incoming request
+ * @link https://trpc.io/docs/context
+ */
+export function createContext (
+  opts: H3Event
+) {
+  // for API-response caching see https://trpc.io/docs/caching
+
+  return {}
+}

examples/custom/server/trpc/routers/index.ts

@@ -0,0 +1,10 @@
+import { router } from '../trpc'
+import { todoRouter } from './todo'
+import { userRouter } from './user'
+
+export const appRouter = router({
+  todo: todoRouter,
+  user: userRouter
+})
+
+export type AppRouter = typeof appRouter

examples/custom/server/trpc/routers/todo.ts

@@ -0,0 +1,33 @@
+import { z } from 'zod'
+import { publicProcedure, router } from '../trpc'
+
+const baseURL = 'https://jsonplaceholder.typicode.com'
+
+const TodoShape = z.object({
+  userId: z.number(),
+  id: z.number(),
+  title: z.string(),
+  completed: z.boolean()
+})
+
+export type Todo = z.infer<typeof TodoShape>
+
+export const todoRouter = router({
+  getTodos: publicProcedure
+    .query(() => {
+      return $fetch<Todo[]>(`${baseURL}/todos`)
+    }),
+  getTodo: publicProcedure
+    .input(z.number())
+    .query((req) => {
+      return $fetch<Todo>(`${baseURL}/todos/${req.input}`)
+    }),
+  addTodo: publicProcedure
+    .input(TodoShape)
+    .mutation((req) => {
+      return $fetch<Todo>(`${baseURL}/todos`, {
+        method: 'POST',
+        body: req.input
+      })
+    })
+})

examples/custom/server/trpc/routers/user.ts

@@ -0,0 +1,33 @@
+import { z } from 'zod'
+import { publicProcedure, router } from '../trpc'
+
+const baseURL = 'https://jsonplaceholder.typicode.com'
+
+const UserShape = z.object({
+  id: z.number(),
+  name: z.string(),
+  username: z.string(),
+  email: z.string()
+})
+
+export type User = z.infer<typeof UserShape>
+
+export const userRouter = router({
+  getUsers: publicProcedure
+    .query(() => {
+      return $fetch<User[]>(`${baseURL}/users`)
+    }),
+  getUser: publicProcedure
+    .input(z.number())
+    .query((req) => {
+      return $fetch<User>(`${baseURL}/users/${req.input}`)
+    }),
+  addUser: publicProcedure
+    .input(UserShape)
+    .mutation((req) => {
+      return $fetch<User>(`${baseURL}/users`, {
+        method: 'POST',
+        body: req.input
+      })
+    })
+})

examples/custom/server/trpc/trpc.ts

@@ -0,0 +1,43 @@
+import { initTRPC } from '@trpc/server'
+import superjson from 'superjson'
+import { ZodError } from 'zod'
+import type { Context } from './context'
+
+const t = initTRPC.context<Context>().create({
+  transformer: superjson,
+  errorFormatter ({ shape, error }) {
+    return {
+      ...shape,
+      data: {
+        ...shape.data,
+        zodError:
+          error.code === 'BAD_REQUEST' &&
+          error.cause instanceof ZodError
+            ? error.cause!.flatten()
+            : null
+      }
+    }
+  }
+})
+
+/**
+ * Create a router
+ * @see https://trpc.io/docs/v10/router
+ */
+export const router = t.router
+
+/**
+  * Create an unprotected procedure
+  * @see https://trpc.io/docs/v10/procedures
+  **/
+export const publicProcedure = t.procedure
+
+/**
+  * @see https://trpc.io/docs/v10/middlewares
+  */
+export const middleware = t.middleware
+
+/**
+  * @see https://trpc.io/docs/v10/merging-routers
+  */
+export const mergeRouters = t.mergeRouters

examples/custom/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://v3.nuxtjs.org/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}