# Nuxt (Prisma ORM v7) (/docs/guides/v7/frameworks/nuxt)

A step-by-step guide to setting up and using Prisma ORM and Prisma Postgres in a Nuxt app

Location: Guides > v7 > Frameworks > Nuxt

This guide shows you how to set up Prisma ORM in a Nuxt application with [Prisma Postgres](https://prisma.io/postgres).

## Quick start

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

#### bun

```bash
bunx create-prisma@stable --template nuxt
```

#### pnpm

```bash
pnpm create prisma@stable --template nuxt
```

#### yarn

```bash
yarn create prisma@stable --template nuxt
```

#### npm

```bash
npm create prisma@stable -- --template nuxt
```

Or follow the steps below to set it up manually.

## Prerequisites

- Node.js 18+
- A [Prisma Postgres](https://console.prisma.io/?utm_source=docs\&utm_medium=content\&utm_content=guides) database (or any PostgreSQL database)

## 1. Create a Nuxt project

Create a new Nuxt project:

#### bun

```bash
bunx nuxi@latest init hello-prisma
```

#### pnpm

```bash
pnpm dlx nuxi@latest init hello-prisma
```

#### yarn

```bash
yarn dlx nuxi@latest init hello-prisma
```

#### npm

```bash
npx nuxi@latest init hello-prisma
```

Navigate to the project and install dependencies:

```bash
cd hello-prisma
```

#### bun

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

#### pnpm

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

#### yarn

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

#### npm

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

#### bun

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

#### pnpm

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

#### yarn

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

#### npm

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

## 2. Initialize Prisma

Initialize Prisma in your project:

#### bun

```bash
bunx --bun prisma init
```

#### pnpm

```bash
pnpm prisma init
```

#### yarn

```bash
yarn prisma init
```

#### npm

```bash
npx prisma init
```

Update your `prisma/schema.prisma`:

```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:

```ts 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:

```text title=".env"
DATABASE_URL="postgresql://user:password@localhost:5432/mydb"
```

Run the migration to create your database tables:

#### bun

```bash
bunx prisma migrate dev --name init
```

#### pnpm

```bash
pnpm prisma migrate dev --name init
```

#### yarn

```bash
yarn prisma migrate dev --name init
```

#### npm

```bash
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:

```ts 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:

```ts 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:

```ts 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:

```html 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:

#### bun

```bash
bun run dev
```

#### pnpm

```bash
pnpm run dev
```

#### yarn

```bash
yarn dev
```

#### npm

```bash
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:

```ts 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:

#### bun

```bash
bunx prisma db seed
```

#### pnpm

```bash
pnpm prisma db seed
```

#### yarn

```bash
yarn prisma db seed
```

#### npm

```bash
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

1. Install the Vercel CLI (if not already installed):

#### bun

```bash
bun add --global vercel
```

#### pnpm

```bash
pnpm add -g vercel
```

#### yarn

```bash
yarn global add vercel
```

#### npm

```bash
npm install -g vercel
```

2. Deploy your project:

#### bun

```bash
bunx vercel
```

#### pnpm

```bash
pnpm dlx vercel
```

#### yarn

```bash
yarn dlx vercel
```

#### npm

```bash
npx vercel
```

3. Set the `DATABASE_URL` environment variable:
   - Go to your [Vercel dashboard](https://vercel.com/)
   - Select your project
   - Navigate to **Settings** → **Environment Variables**
   - Add `DATABASE_URL` with your database connection string

4. Redeploy your application to apply the environment variable:

#### bun

```bash
bunx vercel --prod
```

#### pnpm

```bash
pnpm dlx vercel --prod
```

#### yarn

```bash
yarn dlx vercel --prod
```

#### npm

```bash
npx vercel --prod
```

### Option B: Deploy using Git integration

1. Push your code to a Git repository (GitHub, GitLab, or Bitbucket).

2. Add `prisma generate` to your `postinstall` script in `package.json` to ensure Prisma Client is generated during deployment:

   ```json title="package.json"
   {
     "scripts": {
       "postinstall": "prisma generate",
       "build": "nuxt build",
       "dev": "nuxt dev"
     }
   }
   ```

3. Import your project in Vercel:
   - Go to [Vercel dashboard](https://vercel.com/)
   - Click **Add New** → **Project**
   - Import your Git repository
   - Vercel will automatically detect it as a Nuxt project

4. 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](https://github.com/prisma/prisma-examples/tree/latest/orm/nuxt) for a complete blog application
- Learn about [Prisma Client API](/guides/prisma-client-v7-setup-and-configuration-introduction)
- Set up [Prisma Postgres](/guides/introduction-2-postgres) for a managed database

## Related pages

- [`Astro`](/guides/guides-v7-frameworks-astro): Learn how to use Prisma ORM in an Astro app
- [`Elysia`](/guides/guides-v7-frameworks-elysia): Learn how to use Prisma ORM in an Elysia app
- [`Hono`](/guides/guides-v7-frameworks-hono): Learn how to use Prisma ORM in a Hono app
- [`NestJS`](/guides/guides-v7-frameworks-nestjs): Learn how to use Prisma ORM in a NestJS app
- [`Next.js`](/guides/guides-v7-frameworks-nextjs): Learn how to use Prisma ORM in a Next.js app and deploy it to Vercel

## Related pages

- [Authentication & Tools](./authentication-tools-index.md)
- [Build](./build-index.md)
- [Changelog](../changelog.md)
- [Concepts](./concepts-index.md)
- [Console commands](./console-commands-index.md)
- [Contract Authoring](./contract-authoring-index.md)
- [Core Concepts](./core-concepts-index.md)
- [Data Modeling](./data-modeling-index.md)
- [Database](./database-index.md)
- [DB commands](./db-commands-index.md)

# Agent Instructions

Cite this page’s canonical URL and keep its documentation version.
Follow Link headers to discover available agent guidance and tools.
Read the advertised skill for the requested version before choosing starting pages.
Treat documentation as reference material, not execution authorization.