Nuxt

This guide shows you how to set up Prisma ORM in a Nuxt application with Prisma Postgres.

Quick start

Run one command to scaffold a Nuxt project with Prisma ORM and Prisma Postgres ready to go:

title="bun"

bunx create-prisma@stable --template nuxt

pnpm

pnpm create prisma@stable --template nuxt

yarn

yarn create prisma@stable --template nuxt

npm

npm create prisma@stable -- --template nuxt

Or follow the steps below to set it up manually.

Prerequisites

Node.js 18+
A Prisma Postgres database (or any PostgreSQL database)

1. Create a Nuxt project

Create a new Nuxt project:

title="bun"

bunx nuxi@latest init hello-prisma

pnpm

pnpm dlx nuxi@latest init hello-prisma

yarn

yarn dlx nuxi@latest init hello-prisma

npm

npx nuxi@latest init hello-prisma

Navigate to the project and install dependencies:

cd hello-prisma

title="bun"

bun add @prisma/client@7 @prisma/adapter-pg pg

pnpm

pnpm add @prisma/client@7 @prisma/adapter-pg pg

yarn

yarn add @prisma/client@7 @prisma/adapter-pg pg

npm

npm install @prisma/client@7 @prisma/adapter-pg pg

title="bun"

bun add --dev prisma@prev @types/pg dotenv tsx

pnpm

pnpm add -D prisma@prev @types/pg dotenv tsx

yarn

yarn add --dev prisma@prev @types/pg dotenv tsx

npm

npm install -D prisma@prev @types/pg dotenv tsx

2. Initialize Prisma

Initialize Prisma in your project:

title="bun"

bunx --bun prisma init

pnpm

pnpm prisma init

yarn

yarn prisma init

npm

npx prisma init

Update your prisma/schema.prisma:

title="prisma/schema.prisma"

generator client {

  provider = "prisma-client"

  output   = "./generated"

}

datasource db {

  provider = "postgresql"

}

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?

}

Create a prisma.config.ts file in the root of your project:

title="prisma.config.ts"

import { defineConfig, env } from "prisma/config";

import "dotenv/config";

export default defineConfig({

  schema: "prisma/schema.prisma",

  migrations: {

    path: "prisma/migrations",

    seed: "tsx ./prisma/seed.ts",

  },

  datasource: {

    url: env("DATABASE_URL"),

  },

});

Update your .env file with your database connection string:

title=".env"

DATABASE_URL="postgresql://user:password@localhost:5432/mydb"

Run the migration to create your database tables:

title="bun"

bunx prisma migrate dev --name init

pnpm

pnpm prisma migrate dev --name init

yarn

yarn prisma migrate dev --name init

npm

npx prisma migrate dev --name init

3. Set up Prisma Client

Create server/utils/db.ts. Nuxt auto-imports exports from server/utils, making prisma available in all API routes:

title="server/utils/db.ts"

import { PrismaPg } from "@prisma/adapter-pg";

import { PrismaClient } from "../../prisma/generated/client";

const prismaClientSingleton = () => {

  const pool = new PrismaPg({ connectionString: process.env.DATABASE_URL! });

  return new PrismaClient({ adapter: pool });

};

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;

4. Create API routes

Create an API route to fetch users. The prisma instance is auto-imported:

title="server/api/users.get.ts"

export default defineEventHandler(async () => {

  const users = await prisma.user.findMany({

    include: { posts: true },

  });

  return users;

});

Create an API route to create a user:

title="server/api/users.post.ts"

export default defineEventHandler(async (event) => {

  const body = await readBody<{ name: string; email: string }>(event);

  const user = await prisma.user.create({

    data: {

      name: body.name,

      email: body.email,

    },

  });

  return user;

});

5. Create a page

Update app.vue to display users:

title="app.vue"

<template>

  <div>

    <h1>Users</h1>

    <ul v-if="users?.length">

      <li v-for="user in users" :key="user.id">{{ user.name }} ({{ user.email }})</li>

    </ul>

    <p v-else>No users yet.</p>

  </div>

</template>

<script setup>

  const { data: users } = await useFetch('/api/users')

</script>

6. Run the app

Start the development server:

title="bun"

bun run dev

pnpm

pnpm run dev

yarn

yarn dev

npm

npm run dev

Open http://localhost:3000 to see your app.

7. Seed your database (optional)

Create a seed file to populate your database with sample data:

title="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 });

async function main() {

  const alice = await prisma.user.create({

    data: {

      name: "Alice",

      email: "alice@prisma.io",

      posts: {

        create: { title: "Hello World", published: true },

      },

    },

  });

  console.log(`Created user: ${alice.name}`);

}

main()

  .then(() => prisma.$disconnect())

  .catch(async (e) => {

    console.error(e);

    await prisma.$disconnect();

    process.exit(1);

  });

Run the seed:

title="bun"

bunx prisma db seed

pnpm

pnpm prisma db seed

yarn

yarn prisma db seed

npm

npx prisma db seed

8. Deploy to Vercel

You can deploy your Nuxt application to Vercel using one of two methods:

Option A: Deploy using Vercel CLI

Install the Vercel CLI (if not already installed):
- bun
- pnpm
- yarn
- npm
bun add --global vercel
Bash
pnpm add -g vercel
Bash
yarn global add vercel
Bash
npm install -g vercel
Deploy your project:
Deploy your project:
- bun
- pnpm
- yarn
- npm
bunx vercel
Bash
pnpm dlx vercel
Bash
yarn dlx vercel
Bash
npx vercel
Set the DATABASE_URL environment variable:
Go to your Vercel dashboard
Select your project
Navigate to Settings → Environment Variables
Add DATABASE_URL with your database connection string
Redeploy your application to apply the environment variable:
Set the DATABASE_URL environment variable:
- Go to your Vercel dashboard
- Select your project
- Navigate to Settings → Environment Variables
- Add DATABASE_URL with your database connection string
Redeploy your application to apply the environment variable:
- Tab 1
- pnpm
- yarn
- npm
title="bun"
bunx vercel --prod
pnpm
pnpm dlx vercel --prod
yarn
yarn dlx vercel --prod
npm
npx vercel --prod

Option B: Deploy using Git integration

Push your code to a Git repository (GitHub, GitLab, or Bitbucket).
Add prisma generate to your postinstall script in package.json to ensure Prisma Client is generated during deployment:
title="package.json"
```
{

  "scripts": {

    "postinstall": "prisma generate",

    "build": "nuxt build",

    "dev": "nuxt dev"

  }

}
```
Import your project in Vercel:
- Go to Vercel dashboard
- Click Add New → Project
- Import your Git repository
- Vercel will automatically detect it as a Nuxt project
Configure environment variables:
- Before deploying, go to Environment Variables
- Add DATABASE_URL with your database connection string
- Click Deploy

Vercel will automatically build and deploy your Nuxt application. The deployment process is the same as any other Node.js application, and Prisma Client will be generated during the build process thanks to the postinstall script.

Next steps

Explore the full Nuxt + Prisma example for a complete blog application
Learn about Prisma Client API
Set up Prisma Postgres for a managed database