Prisma Postgres Example: Nuxt 3 Starter (Vite, Node.js, ESM)

This project showcases how to use the Prisma ORM with Prisma Postgres in an ESM Nuxt application.

Prerequisites

To successfully run the project, you will need the following:

• Two Prisma Postgres connection strings:
  • Your Prisma Postgres + Accelerate connection string (containing your Prisma API key) which you can get by enabling Postgres in a project in your Prisma Data Platform account. You will use this connection string to run Prisma migrations.
  • Your Prisma Postgres direct TCP connection string which you will use with Prisma Client. Learn more in the docs.

Tech Stack

• Nuxt 3

  • Runtime: Node.js
  • Bundler: Vite 6

• ESM

  • package.json contains { "type": "module" }

• Prisma Client with the prisma-client generator See the Prisma schema file for details.

  generator client {
    provider = "prisma-client"
    output = "../lib/generated/prisma"
    previewFeatures = ["driverAdapters", "queryCompiler"]
  }

Getting started

1. Clone the repository

Clone the repository, navigate into it and install dependencies:

git clone [email protected]:prisma/prisma-examples.git --depth=1
cd prisma-examples/generator-prisma-client/nuxt3-starter-nodejs
pnpm install

2. Configure environment variables

Create a .env in the root of the project directory:

touch .env

Now, open the .env file and set the DATABASE_URL environment variables with the values of your connection string and your Prisma Postgres connection string:

# .env

# Prisma Postgres connection string (used for migrations)
DATABASE_URL="__YOUR_PRISMA_POSTGRES_CONNECTION_STRING__"

# Postgres connection string (used for queries by Prisma Client)
DIRECT_URL="__YOUR_PRISMA_POSTGRES_DIRECT_CONNECTION_STRING__"

NEXT_PUBLIC_URL="http://localhost:3000"

Note that __YOUR_PRISMA_POSTGRES_CONNECTION_STRING__ is a placeholder value that you need to replace with the values of your Prisma Postgres + Accelerate connection string. Notice that the Accelerate connection string has the following structure: prisma+postgres://accelerate.prisma-data.net/?api_key=<api_key_value>.

Note that __YOUR_PRISMA_POSTGRES_DIRECT_CONNECTION_STRING__ is a placeholder value that you need to replace with the values of your Prisma Postgres direct TCP connection string. The direct connection string has the following structure: postgres://<username>:<password>@<host>:<port>/<database>.

3. Run a migration to create the database structure and seed the database

The Prisma schema file contains a single Quotes model and a QuoteKind enum. You can map this model to the database and create the corresponding Quotes table using the following command:

pnpm prisma migrate dev --name init

You now have an empty Quotes table in your database. Next, run the seed script to create some sample records in the table:

pnpm prisma db seed

4. Generate Prisma Client

Run:

pnpm prisma generate

5. Start the app

You can run the app with the following command:

pnpm dev

Resources

• Prisma Postgres documentation
• Check out the Prisma docs
• Join our community on Discord to share feedback and interact with other users.
• Subscribe to our YouTube channel for live demos and video tutorials.
• Follow us on X for the latest updates.
• Report issues or ask questions on GitHub.