Skip to content

Update nuxt guides #7275

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Nov 18, 2025
Merged

Update nuxt guides #7275

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7413b69
update nuxt guide
AmanVarshney01 Nov 18, 2025
e08a3f4
update
AmanVarshney01 Nov 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions content/200-orm/800-more/600-help-and-troubleshooting/900-prisma-nuxt-module.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,10 @@ The Nuxt Prisma module simplifies the integration of Prisma ORM into your Nuxt a

This module provides several features to streamline the setup and usage of Prisma ORM in a Nuxt application, making it easier to interact with your database.

:::warning
The `@prisma/nuxt` module is currently not supported with Prisma ORM 7 or when using a custom `generator client { output = ... }`. For Prisma 7 projects, follow the general Nuxt guide instead.
:::

## Features

- **Project initialization**: Automatically sets up a Prisma ORM project with a SQLite database within your Nuxt project.
Expand Down
241 changes: 147 additions & 94 deletions content/800-guides/100-nuxt.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: 'How to use Prisma ORM with Nuxt'
metaTitle: 'Build a Nuxt app with Prisma ORM and Prisma Postgres'
description: 'A step-by-step guide to setting up and using Prisma ORM and Prisma Postgres with the Prisma Nuxt module and deploying to Vercel.'
description: 'A step-by-step guide to setting up and using Prisma ORM and Prisma Postgres in a Nuxt app and deploying to Vercel.'
sidebar_label: 'Nuxt'
completion_time: '10 min'
image: '/img/guides/prisma-postgres-and-prisma-nuxt-guide.png'
Expand All @@ -12,12 +12,12 @@ tags:
community_section: true
---

This guide explains how to set up a Nuxt application, configure [Prisma Postgres](https://prisma.io/postgres) using the [Prisma Nuxt module](/orm/more/help-and-troubleshooting/prisma-nuxt-module), and deploy the project to [Vercel](https://vercel.com/) for production.
This guide explains how to set up a Nuxt application, configure [Prisma Postgres](https://prisma.io/postgres) with Prisma ORM, and deploy the project to [Vercel](https://vercel.com/) for production.

Here's what you'll learn:

- How to set up a Nuxt project with the Prisma Nuxt module.
- How to configure and use Prisma Postgres with the Prisma Nuxt module in your Nuxt app.
- How to set up a Nuxt project that uses Prisma ORM directly.
- How to configure and use Prisma Postgres with Prisma ORM in your Nuxt app.
- How to deploy the project to Vercel.

## Prerequisites
Expand All @@ -30,36 +30,21 @@ To follow this guide, ensure you have the following:
- [Vercel](https://vercel.com)
- Basic knowledge of Git and Vercel deployment (helpful but not required).

## 1. Create a New Nuxt Project and set up the Prisma Nuxt module
## 1. Create a New Nuxt Project and install Prisma ORM dependencies

1. Initialize [a new Nuxt project](https://nuxt.com/docs/getting-started/installation#new-project), select `npm` as the package manager and initialize git:
```terminal
npm create nuxt hello-world
```
:::note
We recommend using `npm` as it is the most stable option with the `@prisma/nuxt` module.
:::

2. Navigate into the project directory and install the `@prisma/nuxt` module:
2. Navigate into the project directory and install Prisma ORM dependencies along with the PostgreSQL driver adapter:
```terminal
cd hello-world
npm i @prisma/nuxt
npm install @prisma/client @prisma/adapter-pg pg dotenv tsx
npm install -D prisma @types/pg
```
3. Install the [Prisma Accelerate client extension](https://www.npmjs.com/package/@prisma/extension-accelerate) as it's required to use Prisma Postgres:
3. Initialize Prisma with PostgreSQL by running:
```terminal
npm i @prisma/extension-accelerate
```
4. Add the `@prisma/nuxt` module with the following configuration to your `nuxt.config.ts` file:
```typescript
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
compatibilityDate: "2024-11-01",
modules: ["@prisma/nuxt"],
experimental: {
componentIslands: true,
},
devtools: { enabled: true },
});
npx prisma init --db
```

## 2. Configure Prisma
Expand All @@ -68,62 +53,36 @@ Before running the development server, create a `prisma.config.ts` file in the r

```typescript file=prisma.config.ts
import 'dotenv/config'
import { defineConfig, env } from 'prisma/config';
import { defineConfig, env } from 'prisma/config'

export default defineConfig({
schema: 'prisma/schema.prisma',
migrations: {
path: 'prisma/migrations',
seed: 'tsx ./prisma/seed.ts',
},
datasource: {
url: env('DATABASE_URL'),
},
});
})
```

:::note

You'll need to install the `dotenv` package to load environment variables:

```bash
npm install dotenv
```

:::

## 3. Setup Prisma ORM by running the development server locally
## 3. Set up Prisma ORM

After configuring your Nuxt project with the Prisma module, the next step is to set up Prisma ORM. This process begins by starting the development server, which automatically configures Prisma with a [SQLite database](/orm/overview/databases/sqlite).
With Prisma initialized, define your data model and run a migration to create the PostgreSQL database.

Run the following command to start the development server:

```terminal
npm run dev
```

After running this command, you will be prompted to run a database migration with [Prisma Migrate](/orm/prisma-migrate/understanding-prisma-migrate/overview):

```terminal
? Do you want to migrate database changes to your database? › (Y/n)
```

Confirm that you want to migrate your database and create your initial tables by hitting <kbd>Y</kbd> on your keyboard.

Once the setup flow has terminated, it:

1. Installed the [Prisma CLI](/orm/reference/prisma-cli-reference).
2. Initialized a Prisma project with a SQLite database.
3. Created sample `User` and `Post` models in the `schema.prisma` file:
1. Update the `prisma/schema.prisma` file with the following configuration:
```prisma file=prisma/schema.prisma
// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
provider = "prisma-client"
output = "./generated"
}

datasource db {
provider = "sqlite"
provider = "postgresql"
}

model User {
Expand All @@ -142,39 +101,52 @@ Once the setup flow has terminated, it:
authorId Int
}
```
4. Created the database tables for the `User` and `Post` models from the previous steps.
:::note
The database migrates automatically the first time you start the module if there isn't a `migrations` folder. After that, you need to run `npx prisma migrate dev` manually in the CLI to apply any schema changes. Running the `npx prisma migrate dev` command manually makes it easier and safer to manage migrations and also to [troubleshoot](/orm/prisma-migrate/workflows/troubleshooting) any migration-related errors.
:::
5. Installed and generated [Prisma Client](https://da-2255.docs-51g.pages.dev/orm/reference/prisma-client-reference) which enables you to query your DB.
6. Installed [Prisma Studio](/orm/tools/prisma-studio).

When the Prisma setup is complete, the development server should start on `https://localhost:3000`.

Next, stop the server, as we need to make some code changes.
2. Create the initial migration and database tables:
```terminal
npx prisma migrate dev --name init
```
3. Once the command succeeds, start the Nuxt development server:
```terminal
npm run dev
```
4. When the server is running at `http://localhost:3000`, stop it for now—we’ll update some files before continuing.

## 4. Update the application code

With Prisma configured, the next step is to update your application code to fetch and display data from your database.

1. In the root directory of your project, create a folder named `components`.
1. In the root directory of your project, create a folder named `lib` and add a `prisma.ts` file to share a single Prisma Client instance that connects through the PostgreSQL adapter:
```ts file=lib/prisma.ts
import { PrismaPg } from '@prisma/adapter-pg'
import { PrismaClient } from '../prisma/generated/client'

const prismaClientSingleton = () => {
const adapter = new PrismaPg({ connectionString: process.env.DATABASE_URL! })
return new PrismaClient({ adapter })
}

2. Inside the `components` folder, create a file named `User.server.vue`. This server component will fetch and display the name of the first user from the database:
type PrismaClientSingleton = ReturnType<typeof prismaClientSingleton>

const globalForPrisma = globalThis as unknown as {
prisma: PrismaClientSingleton | undefined
}

export const prisma = globalForPrisma.prisma ?? prismaClientSingleton()

if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma
```

2. Create a folder named `components` (if it doesn’t exist yet) and inside it add `User.server.vue`. This server component fetches and displays the name of the first user from the database:
```html file=components/User.server.vue
<script setup>
import { withAccelerate } from "@prisma/extension-accelerate";
const prisma = usePrismaClient().$extends(withAccelerate());
const user = await prisma.user.findFirst();
import prisma from '~/lib/prisma'
const user = await prisma.user.findFirst()
</script>

<template>
<p>{{ user?.name ?? "No user has been added yet." }}</p>
</template>
```

:::note
We're extending the `usePrismaClient()` composable with the `withAccelerate()` extension method to ensure [compatibility with Prisma Postgres](/postgres/introduction/overview#using-the-client-extension-for-prisma-accelerate-required). This extension will also allow you to [cache your queries](/postgres/database/caching).
:::

3. Modify the `app.vue` file in the root directory to include the new server component using Nuxt Islands:
```html file=app.vue
Expand All @@ -198,7 +170,93 @@ With Prisma configured, the next step is to update your application code to fetc

By completing these steps, your application is now capable of fetching data from your Prisma database and rendering it on the frontend.

## 5. Create a Prisma Postgres instance
## 5. Seed your database (optional)

If you want sample data, create a `prisma/seed.ts` file. The following script uses the PostgreSQL adapter:

```ts file=prisma/seed.ts
import 'dotenv/config'
import { PrismaClient } from './generated/client'
import { PrismaPg } from '@prisma/adapter-pg'

const adapter = new PrismaPg({ connectionString: process.env.DATABASE_URL! })
const prisma = new PrismaClient({ adapter })

const userData = [
{
name: 'Alice',
email: 'alice@prisma.io',
posts: {
create: [
{
title: 'Join the Prisma Discord',
content: 'https://pris.ly/discord',
published: true,
},
],
},
},
{
name: 'Nilu',
email: 'nilu@prisma.io',
posts: {
create: [
{
title: 'Follow Prisma on Twitter',
content: 'https://www.twitter.com/prisma',
published: true,
},
],
},
},
{
name: 'Mahmoud',
email: 'mahmoud@prisma.io',
posts: {
create: [
{
title: 'Ask a question about Prisma on GitHub',
content: 'https://www.github.com/prisma/prisma/discussions',
published: true,
},
{
title: 'Prisma on YouTube',
content: 'https://pris.ly/youtube',
},
],
},
},
]

async function main() {
console.log(`Start seeding ...`)
for (const u of userData) {
const user = await prisma.user.create({
data: u,
})
console.log(`Created user with id: ${user.id}`)
}
console.log(`Seeding finished.`)
}

main()
.then(async () => {
await prisma.$disconnect()
})
.catch(async (e) => {
console.error(e)
await prisma.$disconnect()
process.exit(1)
})
```

Run the seed command whenever you need demo data:

```terminal
npx prisma db seed
```

## 6. Create a Prisma Postgres instance

To store your app's data, you'll create a Prisma Postgres database instance using the Prisma Data Platform.

Expand All @@ -223,7 +281,7 @@ DATABASE_URL=<your-database-url>

The `DATABASE_URL` environment variable will be required in the next steps.

## 6. Set up Prisma Postgres in your Nuxt app
## 7. Set up Prisma Postgres in your Nuxt app

Now that the Prisma Postgres instance is ready, update your Nuxt application to use this database:

Expand All @@ -233,28 +291,23 @@ Now that the Prisma Postgres instance is ready, update your Nuxt application to
DATABASE_URL="prisma+postgres://accelerate.prisma-data.net/?api_key=PRISMA_POSTGRES_API_KEY"
```

2. Modify the `schema.prisma` file by changing the database provider in the `datasource` block of the `schema.prisma` file located in the `prisma` folder:
```prisma file=prisma/schema.prisma
datasource db {
// edit-next-line
provider = "postgresql"
}
```
3. Delete the SQLite database files (`dev.db` and `dev.db-journal`) along with the `migrations` folder, all located in the `prisma` directory. This cleans up the existing SQLite setup and prepares your project to migrate to PostgreSQL.
4. Manually create a new migration for the Postgres database by running the `prisma migrate` command:
2. Manually run a migration to sync your schema to Prisma Postgres:
```terminal
npx prisma migrate dev --name init
```
5. Start the development server again:
3. (Optional) Seed your database with sample data:
```terminal
npx prisma db seed
```
4. Start the development server again:
```terminal
npm run dev
```
6. Open the Nuxt DevTools (by hitting <kbd>Shift</kbd>+<kbd>Option</kbd>+ <kbd>D</kbd>) and click the Prisma logo in the left sidenav to open Prisma Studio. Then add a new `User` record by specifying values for the `name` and `email` fields.
7. Verify the data in the application by refreshing your application at `https://localhost:3000`. The page should display the name of the user you added in Prisma Studio. For example, if you added a user named `Jon`, the application will display `Jon` in the browser.
5. Verify the data in the application by opening `https://localhost:3000`. If you seeded the database, you should see the first user's name displayed.

Congratulations, your Nuxt app is now fully integrated with Prisma Postgres!

## 7. Deploy to Vercel
## 8. Deploy to Vercel

Deploy your Nuxt application with Prisma Postgres integration to Vercel by following these steps:

Expand Down Expand Up @@ -295,4 +348,4 @@ Congratulations! Your Nuxt application with Prisma Postgres integration is now l

## Considerations

This guide helps you get started with Prisma Postgres using the Nuxt module. Because the Nuxt module is actively evolving, it does not cover all of Prisma's features or support every edge case. For more advanced functionality or edge deployments, consider using Prisma directly.
This guide helps you get started with Prisma Postgres in a Nuxt application. For more advanced functionality or edge deployments, explore Prisma’s broader guides and tailor the setup to your project’s needs.
Loading