diff --git a/examples/basic-example/.gitignore b/examples/basic-example/.gitignore new file mode 100644 index 0000000..768a14e --- /dev/null +++ b/examples/basic-example/.gitignore @@ -0,0 +1,23 @@ +# Nuxt dev/build outputs +.output +.nuxt +.nitro +.cache +dist + +# Node dependencies +node_modules + +# Logs +logs +*.log + +# Misc +.DS_Store +.fleet +.idea + +# Local env files +.env +.env.* +!.env.example diff --git a/examples/basic-example/.npmrc b/examples/basic-example/.npmrc new file mode 100644 index 0000000..cf04042 --- /dev/null +++ b/examples/basic-example/.npmrc @@ -0,0 +1,2 @@ +shamefully-hoist=true +strict-peer-dependencies=false diff --git a/examples/basic-example/.prettierrc b/examples/basic-example/.prettierrc new file mode 100644 index 0000000..76e280e --- /dev/null +++ b/examples/basic-example/.prettierrc @@ -0,0 +1,5 @@ +{ + "tabWidth": 2, + "singleQuote": true, + "semi": false +} diff --git a/examples/basic-example/README.md b/examples/basic-example/README.md new file mode 100644 index 0000000..595dda9 --- /dev/null +++ b/examples/basic-example/README.md @@ -0,0 +1,63 @@ +# Nuxt 3 Minimal Starter + +Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more. + +## Setup + +Make sure to install the dependencies: + +```bash +# npm +npm install + +# pnpm +pnpm install + +# yarn +yarn install +``` + +## Development Server + +Start the development server on `http://localhost:3000`: + +```bash +# npm +npm run dev + +# pnpm +pnpm run dev + +# yarn +yarn dev +``` + +## Production + +Build the application for production: + +```bash +# npm +npm run build + +# pnpm +pnpm run build + +# yarn +yarn build +``` + +Locally preview production build: + +```bash +# npm +npm run preview + +# pnpm +pnpm run preview + +# yarn +yarn preview +``` + +Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information. diff --git a/examples/basic-example/app.vue b/examples/basic-example/app.vue new file mode 100644 index 0000000..ad57c0b --- /dev/null +++ b/examples/basic-example/app.vue @@ -0,0 +1,127 @@ + + + + + diff --git a/examples/basic-example/nuxt.config.ts b/examples/basic-example/nuxt.config.ts new file mode 100644 index 0000000..efca6b3 --- /dev/null +++ b/examples/basic-example/nuxt.config.ts @@ -0,0 +1,7 @@ +// https://nuxt.com/docs/api/configuration/nuxt-config +export default defineNuxtConfig({ + devtools: { enabled: true }, + build: { + transpile: ['trpc-nuxt'], + }, +}) diff --git a/examples/basic-example/package.json b/examples/basic-example/package.json new file mode 100644 index 0000000..3fe4d38 --- /dev/null +++ b/examples/basic-example/package.json @@ -0,0 +1,22 @@ +{ + "name": "nuxt-app", + "private": true, + "scripts": { + "build": "nuxt build", + "dev": "nuxt dev", + "generate": "nuxt generate", + "preview": "nuxt preview", + "postinstall": "nuxt prepare" + }, + "devDependencies": { + "@nuxt/devtools": "latest", + "@types/node": "^18", + "nuxt": "^3.5.2" + }, + "dependencies": { + "@trpc/client": "^10.28.0", + "@trpc/server": "^10.28.0", + "trpc-nuxt": "^0.10.5", + "zod": "^3.21.4" + } +} diff --git a/examples/basic-example/plugins/client.ts b/examples/basic-example/plugins/client.ts new file mode 100644 index 0000000..cd9d668 --- /dev/null +++ b/examples/basic-example/plugins/client.ts @@ -0,0 +1,22 @@ +import { createTRPCNuxtClient, httpBatchLink } from 'trpc-nuxt/client' +import type { AppRouter } from '~/server/trpc/routers' + +export default defineNuxtPlugin(() => { + /** + * createTRPCNuxtClient adds a `useQuery` composable + * built on top of `useAsyncData`. + */ + const client = createTRPCNuxtClient({ + links: [ + httpBatchLink({ + url: '/api/trpc', + }), + ], + }) + + return { + provide: { + client, + }, + } +}) diff --git a/examples/basic-example/public/favicon.ico b/examples/basic-example/public/favicon.ico new file mode 100644 index 0000000..18993ad Binary files /dev/null and b/examples/basic-example/public/favicon.ico differ diff --git a/examples/basic-example/server/api/trpc/[trpc].ts b/examples/basic-example/server/api/trpc/[trpc].ts new file mode 100644 index 0000000..dcbbcb9 --- /dev/null +++ b/examples/basic-example/server/api/trpc/[trpc].ts @@ -0,0 +1,9 @@ +import { createNuxtApiHandler } from 'trpc-nuxt' +import { appRouter } from '../../trpc/routers' +import { createContext } from '../../trpc/context' + +// export API handler +export default createNuxtApiHandler({ + router: appRouter, + createContext, +}) diff --git a/examples/basic-example/server/trpc/context.ts b/examples/basic-example/server/trpc/context.ts new file mode 100644 index 0000000..80f720b --- /dev/null +++ b/examples/basic-example/server/trpc/context.ts @@ -0,0 +1,9 @@ +import { inferAsyncReturnType } from '@trpc/server' + +/** + * Creates context for an incoming request + * @link https://trpc.io/docs/context + */ +export const createContext = () => ({}) + +export type Context = inferAsyncReturnType diff --git a/examples/basic-example/server/trpc/routers/index.ts b/examples/basic-example/server/trpc/routers/index.ts new file mode 100644 index 0000000..26bd74f --- /dev/null +++ b/examples/basic-example/server/trpc/routers/index.ts @@ -0,0 +1,27 @@ +import { z } from 'zod' +import { publicProcedure, router } from '../trpc' + +export const appRouter = router({ + hello: publicProcedure + .input( + z.object({ + text: z.string().nullish(), + }) + ) + .query(({ input }) => { + console.log(input) + return { + greeting: `hello ${input?.text ?? 'world'}`, + } + }), + products: publicProcedure.query(async () => { + return { + title: 'TRPC Nuxt', + price: 12.0, + description: 'Check out the trpc-nuxt repo', + } + }), +}) + +// export type definition of API +export type AppRouter = typeof appRouter diff --git a/examples/basic-example/server/trpc/trpc.ts b/examples/basic-example/server/trpc/trpc.ts new file mode 100644 index 0000000..82e8507 --- /dev/null +++ b/examples/basic-example/server/trpc/trpc.ts @@ -0,0 +1,20 @@ +/** + * This is your entry point to setup the root configuration for tRPC on the server. + * - `initTRPC` should only be used once per app. + * - We export only the functionality that we use so we can enforce which base procedures should be used + * + * Learn how to create protected base procedures and other things below: + * @see https://trpc.io/docs/v10/router + * @see https://trpc.io/docs/v10/procedures + */ +import { initTRPC } from '@trpc/server' +import { Context } from '../trpc/context' + +const t = initTRPC.context().create() + +/** + * Unprotected procedure + **/ +export const publicProcedure = t.procedure +export const router = t.router +export const middleware = t.middleware diff --git a/examples/basic-example/server/tsconfig.json b/examples/basic-example/server/tsconfig.json new file mode 100644 index 0000000..b9ed69c --- /dev/null +++ b/examples/basic-example/server/tsconfig.json @@ -0,0 +1,3 @@ +{ + "extends": "../.nuxt/tsconfig.server.json" +} diff --git a/examples/basic-example/tsconfig.json b/examples/basic-example/tsconfig.json new file mode 100644 index 0000000..a746f2a --- /dev/null +++ b/examples/basic-example/tsconfig.json @@ -0,0 +1,4 @@ +{ + // https://nuxt.com/docs/guide/concepts/typescript + "extends": "./.nuxt/tsconfig.json" +}