Using Prisma Postgres with the Prisma Nuxt Module

The Prisma Nuxt module helps you get started with Prisma in Nuxt applications by simplifying the initial setup process. This guide explains how to set up a Nuxt application, configure Prisma Postgres using the Prisma Nuxt module, and deploy the project to Vercel 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 deploy the project to Vercel.

Prerequisites

To follow this guide, ensure you have the following:

Node.js version: A compatible Node.js version required for Prisma 6.
Accounts:
Basic knowledge of Git and Vercel deployment (helpful but not required).

1. Create a New Nuxt Project and set up the Prisma Nuxt module

Initialize a new Nuxt project, select npm as the package manager and initialize git:
```
npx nuxi@latest init hello-world
```
note
We recommend using npm as it is the most stable option with the @prisma/nuxt module.
Navigate into the project directory and install the @prisma/nuxt module:
```
cd hello-world
npm i @prisma/nuxt
```
Install the Prisma Accelerate client extension as it's required to use Prisma Postgres:
```
npm i @prisma/extension-accelerate
```

Add the @prisma/nuxt module with the following configuration to your nuxt.config.ts file:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: "2024-11-01",
  modules: ["@prisma/nuxt"],
  experimental: {
    componentIslands: true,
  },
  devtools: { enabled: true },
});

2. Setup Prisma ORM by running the development server locally

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.

Run the following command to start the development server:

npm run dev

After running this command, you will be prompted to run a database migration with Prisma Migrate:

? 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 Y on your keyboard.

Once the setup flow has terminated, it:

Installed the Prisma CLI.
Initialized a Prisma project with a SQLite database.

Created sample User and Post models in the schema.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-js"
}

datasource db {
  provider = "sqlite"
  url      = env("DATABASE_URL")
}

model User {
  id    Int     @id @default(autoincrement())
  email String  @unique
  name  String?
  posts Post[]
}

model Post {
  id        Int     @id @default(autoincrement())
  title     String
  content   String?
  published Boolean @default(false)
  author    User    @relation(fields: [authorId], references: [id])
  authorId  Int
}

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 any migration-related errors.
Installed and generated Prisma Client which enables you to query your DB.
Installed 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.

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.

In the root directory of your project, create a folder named components.
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:

components/User.server.vue
```
<script setup>
   import { withAccelerate } from "@prisma/extension-accelerate";
   const prisma = usePrismaClient().$extends(withAccelerate());
   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. This extension will also allow you to cache your queries.
Modify the app.vue file in the root directory to include the new server component using Nuxt Islands:

app.vue
```
<template>
  <div>
    <NuxtIsland name="User"></NuxtIsland>
  </div>
</template>
```
Run the following command to start the development server again:
```
npm run dev
```
Verify the application code is working by opening your application in a browser at https://localhost:3000.
As there are no users in the database yet, the application will display:
```
No user has been added yet.
```
This message will dynamically update when users are added to your database.

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

Now create a Prisma Postgres database instance using the Prisma Data Platform:

Navigate to .
Click New project to create a new project.
Enter a name for your project in the Name field.
Inside the Prisma Postgres® section, click Get started.
Choose a region close to your location from the Region dropdown.
Click Create project to set up your database. This redirects you to the database setup page.
In the Set up database access section, copy the DATABASE_URL. You will use this in the next steps.

At this point, you have successfully created a Prisma Postgres instance.

6. Set up Prisma Postgres in your Nuxt app

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

Update the .env file by replacing the existing DATABASE_URL value with the one you previously copied. It will look similar to this:

.env
```
DATABASE_URL="prisma+postgres://accelerate.prisma-data.net/?api_key=PRISMA_POSTGRES_API_KEY"
```
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/schema.prisma
```
datasource db {
 provider = "postgresql"
 url      = env("DATABASE_URL")
}
```
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.
Manually create a new migration for the Postgres database by running the prisma migrate command:
```
npx prisma migrate dev --name init
```
Start the development server again:
```
npm run dev
```
Open the Nuxt DevTools (by hitting Shift+Option+ D) 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.
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.

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

7. Deploy to Vercel

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

Ensure your project is version-controlled and pushed to a GitHub repository. If you don’t have a repository yet, create one on GitHub. Once the repository is ready, run the following commands:
```
git add .
git commit -m "Initial commit with Prisma Postgres integration"
git branch -M main
git remote add origin https://github.com/<your-username>/<repository-name>.git
git push -u origin main
```
note
Replace <your-username> and <repository-name> with your GitHub username and the name of your repository.
Log in to Vercel and navigate to your Dashboard.
Create a new project. Follow Vercel's Import an existing project guide, but stop at step 3 where you will configure environment variables before clicking Deploy.
Configure the DATABASE_URL environment variable:
1. Expand the Environment variables section.
2. Add the DATABASE_URL environment variable:
  - Key: DATABASE_URL
  - Value: Paste your Prisma Postgres connection URL, e.g. by copying it from the .env file in your Nuxt project.
  warning
  Do not deploy without setting the DATABASE_URL variable. Your deployment will fail if the application cannot connect to the database.
Click the Deploy button. Vercel will build your project and deploy it to a live URL.
Open the live URL provided by Vercel and verify that your application is working:
- If you’ve added a user in Prisma Studio, their name should appear on the live site.
- If no users exist, the application will display:
```
No user has been added yet.
```
To add or manage data:
1. Open Prisma Studio via the Prisma Data Platform or local instance.
2. Add or update user data in the database.
3. Refresh your live site to confirm the changes.

Congratulations! Your Nuxt application with Prisma Postgres integration is now live and fully operational on Vercel.

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.

Prerequisites​

1. Create a New Nuxt Project and set up the Prisma Nuxt module​

2. Setup Prisma ORM by running the development server locally​

4. Update the application code​

5. Create a Prisma Postgres instance​

6. Set up Prisma Postgres in your Nuxt app​

7. Deploy to Vercel​

Considerations​