From ed6c5310f09c90acb9f465e8ae55e1371ce2bf78 Mon Sep 17 00:00:00 2001 From: Ankur Datta Date: Thu, 13 Jun 2024 21:21:55 +0600 Subject: [PATCH 1/8] docs: add nuxt module help #DA-340 --- .../900-prisma-nuxt-module.mdx | 152 ++++++++++++++++++ 1 file changed, 152 insertions(+) create mode 100644 content/200-orm/800-more/600-help-and-troubleshooting/100-help-articles/900-prisma-nuxt-module.mdx diff --git a/content/200-orm/800-more/600-help-and-troubleshooting/100-help-articles/900-prisma-nuxt-module.mdx b/content/200-orm/800-more/600-help-and-troubleshooting/100-help-articles/900-prisma-nuxt-module.mdx new file mode 100644 index 0000000000..7c49bc9818 --- /dev/null +++ b/content/200-orm/800-more/600-help-and-troubleshooting/100-help-articles/900-prisma-nuxt-module.mdx @@ -0,0 +1,152 @@ +--- + +title: 'Using the Nuxt Prisma Module' +metaTitle: 'Add Prisma ORM Easily to Your Nuxt Apps' +metaDescription: 'Learn how to easily add Prisma ORM to your Nuxt apps, use its features, and understand its limitations.' + +--- + +The Nuxt Prisma module simplifies the integration of Prisma ORM into your Nuxt applications. This module provides several features to streamline the setup and usage of Prisma, making it easier to manage your database interactions. + +### Features + +- **Project initialization**: Automatically sets up a Prisma ORM project with a SQLite database within your Nuxt project. +- **Composable**: Provides an auto-imported `usePrismaClient()` composable for use in your Vue files. +- **API Route Integration**: Automatically imports an instance of `prisma` for use in your API routes. +- **Prisma Studio access**: Enables access to Prisma Studio through Nuxt Devtools for database management. + +## Getting Started + +1. Create a [new Nuxt Project](https://nuxt.com/docs/getting-started/installation#new-project): + ```sh + npx nuxi@latest init test-app + ``` + +2. Navigate to project directory and install `@prisma/nuxt`: + ```sh + cd test-app + npm install @prisma/nuxt + ``` + +3. Add `@prisma/nuxt` to your `nuxt.config.ts`: + ```typescript + export default defineNuxtConfig({ + modules: ["@prisma/nuxt"], + devtools: { enabled: true }, + }); + ``` + +4. Start the development server: + ```sh + npm run dev + ``` + + Starting the development server will: + + - Automatically install the [Prisma CLI](https://www.prisma.io/docs/orm/reference/prisma-cli-reference) + - Initialize a Prisma project with SQLite + - Create an `User` and `Post` example model in the Prisma Schema + - Prompt you to run a migration to create database tables with [Prisma Migrate](https://www.prisma.io/docs/orm/prisma-migrate/understanding-prisma-migrate/overview) + - Install and generate a [Prisma Client](https://www.prisma.io/docs/orm/reference/prisma-client-reference) + - Prompt you to start the [Prisma Studio](https://www.prisma.io/docs/orm/tools/prisma-studio) + +5. You can now use Prisma ORM in your project. If you accepted the prompt to add Prisma Studio, you can access Prisma Studio through the Nuxt Devtools. See the [usage section](#usage) to learn how to use Prisma Client in your app. + +## Usage + +### Option A: usePrismaClient composable + +#### Using the composable in your Nuxt server component + +If you're using [Nuxt server components](https://nuxt.com/docs/guide/directory-structure/components#server-components), you can use the global instance of the Prisma Client in your `.server.vue` files: +```html + + + +``` + +#### Using the auto-imported Prisma Client instance in your API route + +You can use the auto-imported Prisma Client instance, prisma, in your Nuxt API route as follows: +```typescript +export default defineEventHandler(async (event) => { + return { + user: await prisma.user.findFirst(), + }; +}); +``` + +### Option B: lib/prisma.ts + +After running through the initial setup prompts, this module creates the `lib/prisma.ts` file which contains a global instance of Prisma Client. +```typescript +import { PrismaClient } from '@prisma/client' + +const prismaClientSingleton = () => { + return new PrismaClient() +} + +declare const globalThis: { + prismaGlobal: ReturnType; +} & typeof global; + +const prisma = globalThis.prismaGlobal ?? prismaClientSingleton() + +export default prisma + +if (process.env.NODE_ENV !== 'production') globalThis.prismaGlobal = prisma +``` + +You can customize Prisma Client's capabilities by using client extensions in your `lib/prisma.ts` file. Here is an example using the [Pulse client extension](https://www.npmjs.com/package/@prisma/extension-pulse): +```typescript +import { PrismaClient } from '@prisma/client' +import { withPulse } from '@prisma/extension-pulse' + +const prismaClientSingleton = () => { + return new PrismaClient().$extends(withPulse({ + apiKey: process.env.PULSE_API_KEY + })) +} + +declare const globalThis: { + prismaGlobal: ReturnType; +} & typeof global; + +const prisma = globalThis.prismaGlobal ?? prismaClientSingleton() + +export default prisma + +if (process.env.NODE_ENV !== 'production') globalThis.prismaGlobal = prisma +``` + +#### Using the global Prisma Client instance in your API route + +You can use the global instance of the Prisma Client in your Nuxt API route as follows: +```typescript +import prisma from "~/lib/prisma"; + +export default defineEventHandler(async (event) => { + return { + user: await prisma.user.findFirst(), + }; +}); +``` + +#### Using the global Prisma Client instance in your Nuxt server component + +If you're using [Nuxt server components](https://nuxt.com/docs/guide/directory-structure/components#server-components), you can use the global instance of the Prisma Client `.server.vue` files: +```html + + + +``` \ No newline at end of file From 581c16e71af0995dd40dc3b72007c76ffa742d25 Mon Sep 17 00:00:00 2001 From: Ankur Datta Date: Fri, 14 Jun 2024 00:52:03 +0600 Subject: [PATCH 2/8] enhance: rename example app --- .../100-help-articles/900-prisma-nuxt-module.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/200-orm/800-more/600-help-and-troubleshooting/100-help-articles/900-prisma-nuxt-module.mdx b/content/200-orm/800-more/600-help-and-troubleshooting/100-help-articles/900-prisma-nuxt-module.mdx index 7c49bc9818..768ff9ca9a 100644 --- a/content/200-orm/800-more/600-help-and-troubleshooting/100-help-articles/900-prisma-nuxt-module.mdx +++ b/content/200-orm/800-more/600-help-and-troubleshooting/100-help-articles/900-prisma-nuxt-module.mdx @@ -19,12 +19,12 @@ The Nuxt Prisma module simplifies the integration of Prisma ORM into your Nuxt a 1. Create a [new Nuxt Project](https://nuxt.com/docs/getting-started/installation#new-project): ```sh - npx nuxi@latest init test-app + npx nuxi@latest init test-nuxt-app ``` 2. Navigate to project directory and install `@prisma/nuxt`: ```sh - cd test-app + cd test-nuxt-app npm install @prisma/nuxt ``` From 9e7f35a6a65c2df39c58126e97b50ea25dacb165 Mon Sep 17 00:00:00 2001 From: Ankur Datta <64993082+ankur-arch@users.noreply.github.com> Date: Fri, 14 Jun 2024 00:56:49 +0600 Subject: [PATCH 3/8] Update content/200-orm/800-more/600-help-and-troubleshooting/100-help-articles/900-prisma-nuxt-module.mdx Co-authored-by: Jon Harrell <4829245+jharrell@users.noreply.github.com> --- .../100-help-articles/900-prisma-nuxt-module.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/200-orm/800-more/600-help-and-troubleshooting/100-help-articles/900-prisma-nuxt-module.mdx b/content/200-orm/800-more/600-help-and-troubleshooting/100-help-articles/900-prisma-nuxt-module.mdx index 768ff9ca9a..8ee3965cb5 100644 --- a/content/200-orm/800-more/600-help-and-troubleshooting/100-help-articles/900-prisma-nuxt-module.mdx +++ b/content/200-orm/800-more/600-help-and-troubleshooting/100-help-articles/900-prisma-nuxt-module.mdx @@ -54,7 +54,7 @@ The Nuxt Prisma module simplifies the integration of Prisma ORM into your Nuxt a ## Usage -### Option A: usePrismaClient composable +### Option A: `usePrismaClient` composable #### Using the composable in your Nuxt server component From 181eb2325dbcb09af533498816c59d85daa999af Mon Sep 17 00:00:00 2001 From: Ankur Datta <64993082+ankur-arch@users.noreply.github.com> Date: Fri, 14 Jun 2024 00:57:08 +0600 Subject: [PATCH 4/8] Update content/200-orm/800-more/600-help-and-troubleshooting/100-help-articles/900-prisma-nuxt-module.mdx Co-authored-by: Jon Harrell <4829245+jharrell@users.noreply.github.com> --- .../100-help-articles/900-prisma-nuxt-module.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/200-orm/800-more/600-help-and-troubleshooting/100-help-articles/900-prisma-nuxt-module.mdx b/content/200-orm/800-more/600-help-and-troubleshooting/100-help-articles/900-prisma-nuxt-module.mdx index 8ee3965cb5..48ad229747 100644 --- a/content/200-orm/800-more/600-help-and-troubleshooting/100-help-articles/900-prisma-nuxt-module.mdx +++ b/content/200-orm/800-more/600-help-and-troubleshooting/100-help-articles/900-prisma-nuxt-module.mdx @@ -81,7 +81,7 @@ export default defineEventHandler(async (event) => { }); ``` -### Option B: lib/prisma.ts +### Option B: `lib/prisma.ts` After running through the initial setup prompts, this module creates the `lib/prisma.ts` file which contains a global instance of Prisma Client. ```typescript From 2f16919b0a5495809883de05f0544da06bd05482 Mon Sep 17 00:00:00 2001 From: Ankur Datta <64993082+ankur-arch@users.noreply.github.com> Date: Fri, 14 Jun 2024 01:01:58 +0600 Subject: [PATCH 5/8] Update content/200-orm/800-more/600-help-and-troubleshooting/100-help-articles/900-prisma-nuxt-module.mdx Co-authored-by: Jon Harrell <4829245+jharrell@users.noreply.github.com> --- .../100-help-articles/900-prisma-nuxt-module.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/200-orm/800-more/600-help-and-troubleshooting/100-help-articles/900-prisma-nuxt-module.mdx b/content/200-orm/800-more/600-help-and-troubleshooting/100-help-articles/900-prisma-nuxt-module.mdx index 48ad229747..6ac6558e42 100644 --- a/content/200-orm/800-more/600-help-and-troubleshooting/100-help-articles/900-prisma-nuxt-module.mdx +++ b/content/200-orm/800-more/600-help-and-troubleshooting/100-help-articles/900-prisma-nuxt-module.mdx @@ -48,7 +48,7 @@ The Nuxt Prisma module simplifies the integration of Prisma ORM into your Nuxt a - Create an `User` and `Post` example model in the Prisma Schema - Prompt you to run a migration to create database tables with [Prisma Migrate](https://www.prisma.io/docs/orm/prisma-migrate/understanding-prisma-migrate/overview) - Install and generate a [Prisma Client](https://www.prisma.io/docs/orm/reference/prisma-client-reference) - - Prompt you to start the [Prisma Studio](https://www.prisma.io/docs/orm/tools/prisma-studio) + - Prompt you to start the [Prisma Studio](/orm/tools/prisma-studio) 5. You can now use Prisma ORM in your project. If you accepted the prompt to add Prisma Studio, you can access Prisma Studio through the Nuxt Devtools. See the [usage section](#usage) to learn how to use Prisma Client in your app. From 8044171ff8b6c9d184fa0cfc6466037177c2c4a4 Mon Sep 17 00:00:00 2001 From: Ankur Datta <64993082+ankur-arch@users.noreply.github.com> Date: Fri, 14 Jun 2024 01:02:04 +0600 Subject: [PATCH 6/8] Update content/200-orm/800-more/600-help-and-troubleshooting/100-help-articles/900-prisma-nuxt-module.mdx Co-authored-by: Jon Harrell <4829245+jharrell@users.noreply.github.com> --- .../100-help-articles/900-prisma-nuxt-module.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/200-orm/800-more/600-help-and-troubleshooting/100-help-articles/900-prisma-nuxt-module.mdx b/content/200-orm/800-more/600-help-and-troubleshooting/100-help-articles/900-prisma-nuxt-module.mdx index 6ac6558e42..54e7c5403b 100644 --- a/content/200-orm/800-more/600-help-and-troubleshooting/100-help-articles/900-prisma-nuxt-module.mdx +++ b/content/200-orm/800-more/600-help-and-troubleshooting/100-help-articles/900-prisma-nuxt-module.mdx @@ -43,7 +43,7 @@ The Nuxt Prisma module simplifies the integration of Prisma ORM into your Nuxt a Starting the development server will: - - Automatically install the [Prisma CLI](https://www.prisma.io/docs/orm/reference/prisma-cli-reference) + - Automatically install the [Prisma CLI](/orm/reference/prisma-cli-reference) - Initialize a Prisma project with SQLite - Create an `User` and `Post` example model in the Prisma Schema - Prompt you to run a migration to create database tables with [Prisma Migrate](https://www.prisma.io/docs/orm/prisma-migrate/understanding-prisma-migrate/overview) From 68adeb487ec1add7a6b0dd06e2048de528e8f696 Mon Sep 17 00:00:00 2001 From: Ankur Datta <64993082+ankur-arch@users.noreply.github.com> Date: Fri, 14 Jun 2024 01:02:10 +0600 Subject: [PATCH 7/8] Update content/200-orm/800-more/600-help-and-troubleshooting/100-help-articles/900-prisma-nuxt-module.mdx Co-authored-by: Jon Harrell <4829245+jharrell@users.noreply.github.com> --- .../100-help-articles/900-prisma-nuxt-module.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/200-orm/800-more/600-help-and-troubleshooting/100-help-articles/900-prisma-nuxt-module.mdx b/content/200-orm/800-more/600-help-and-troubleshooting/100-help-articles/900-prisma-nuxt-module.mdx index 54e7c5403b..22a7a7583d 100644 --- a/content/200-orm/800-more/600-help-and-troubleshooting/100-help-articles/900-prisma-nuxt-module.mdx +++ b/content/200-orm/800-more/600-help-and-troubleshooting/100-help-articles/900-prisma-nuxt-module.mdx @@ -47,7 +47,7 @@ The Nuxt Prisma module simplifies the integration of Prisma ORM into your Nuxt a - Initialize a Prisma project with SQLite - Create an `User` and `Post` example model in the Prisma Schema - Prompt you to run a migration to create database tables with [Prisma Migrate](https://www.prisma.io/docs/orm/prisma-migrate/understanding-prisma-migrate/overview) - - Install and generate a [Prisma Client](https://www.prisma.io/docs/orm/reference/prisma-client-reference) + - Install and generate a [Prisma Client](/orm/reference/prisma-client-reference) - Prompt you to start the [Prisma Studio](/orm/tools/prisma-studio) 5. You can now use Prisma ORM in your project. If you accepted the prompt to add Prisma Studio, you can access Prisma Studio through the Nuxt Devtools. See the [usage section](#usage) to learn how to use Prisma Client in your app. From 1fe1292421eda0468d747f2c04c62798dfa2c304 Mon Sep 17 00:00:00 2001 From: Ankur Datta <64993082+ankur-arch@users.noreply.github.com> Date: Fri, 14 Jun 2024 01:02:15 +0600 Subject: [PATCH 8/8] Update content/200-orm/800-more/600-help-and-troubleshooting/100-help-articles/900-prisma-nuxt-module.mdx Co-authored-by: Jon Harrell <4829245+jharrell@users.noreply.github.com> --- .../100-help-articles/900-prisma-nuxt-module.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/200-orm/800-more/600-help-and-troubleshooting/100-help-articles/900-prisma-nuxt-module.mdx b/content/200-orm/800-more/600-help-and-troubleshooting/100-help-articles/900-prisma-nuxt-module.mdx index 22a7a7583d..65a5f0fe42 100644 --- a/content/200-orm/800-more/600-help-and-troubleshooting/100-help-articles/900-prisma-nuxt-module.mdx +++ b/content/200-orm/800-more/600-help-and-troubleshooting/100-help-articles/900-prisma-nuxt-module.mdx @@ -46,7 +46,7 @@ The Nuxt Prisma module simplifies the integration of Prisma ORM into your Nuxt a - Automatically install the [Prisma CLI](/orm/reference/prisma-cli-reference) - Initialize a Prisma project with SQLite - Create an `User` and `Post` example model in the Prisma Schema - - Prompt you to run a migration to create database tables with [Prisma Migrate](https://www.prisma.io/docs/orm/prisma-migrate/understanding-prisma-migrate/overview) + - Prompt you to run a migration to create database tables with [Prisma Migrate](/orm/prisma-migrate/understanding-prisma-migrate/overview) - Install and generate a [Prisma Client](/orm/reference/prisma-client-reference) - Prompt you to start the [Prisma Studio](/orm/tools/prisma-studio)