# Nuxt

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

This guide shows you how to set up Prisma ORM in a Nuxt application with [Prisma Postgres](/content/postgres/index.html).

## [Prerequisites](/content/docs/v6/guides/nuxt#prerequisites/index.html)

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

## [1. Create a Nuxt project](/content/docs/v6/guides/nuxt#1-create-a-nuxt-project/index.html)

Create a new Nuxt project and install dependencies:

```bash
npx nuxi@latest init hello-prisma
cd hello-prisma
npm install @prisma/client @prisma/adapter-pg pg
npm install -D prisma @types/pg dotenv tsx
```

## [2. Initialize Prisma](/content/docs/v6/guides/nuxt#2-initialize-prisma/index.html)

Initialize Prisma in your project:

```bash
npx prisma init
```

Update your `prisma/schema.prisma`:

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

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

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

Run the migration to create your database tables:

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

## [3. Set up Prisma Client](/content/docs/v6/guides/nuxt#3-set-up-prisma-client/index.html)

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

```typescript
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](/content/docs/v6/guides/nuxt#4-create-api-routes/index.html)

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

```typescript
export default defineEventHandler(async () => {
  const users = await prisma.user.findMany({
    include: { posts: true },
  });
  return users;
});
```

Create an API route to create a user:

```typescript
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](/content/docs/v6/guides/nuxt#5-create-a-page/index.html)

Update `app.vue` to display users:

```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](/content/docs/v6/guides/nuxt#6-run-the-app/index.html)

Start the development server:

```bash
npm run dev
```

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

## [7. Seed your database (optional)](/content/docs/v6/guides/nuxt#7-seed-your-database-optional/index.html)

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

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

```bash
npx prisma db seed
```

## [8. Deploy to Vercel](/content/docs/v6/guides/nuxt#8-deploy-to-vercel/index.html)

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

### [Option A: Deploy using Vercel CLI](/content/docs/v6/guides/nuxt#option-a-deploy-using-vercel-cli/index.html)

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

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

2. Deploy your project:

```bash
   npx vercel
   ```

3. Set the `DATABASE_URL` environment variable:
   - Go to your [Vercel Dashboard](https://vercel.com/dashboard)
   - 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:

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

### [Option B: Deploy using Git integration](/content/docs/v6/guides/nuxt#option-b-deploy-using-git-integration/index.html)

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
   {
       "scripts": {
         "postinstall": "prisma generate",
         "build": "nuxt build",
         "dev": "nuxt dev"
       }
   }
   ```

3. Import your project in Vercel:
   - Go to [Vercel Dashboard](https://vercel.com/dashboard)
   - 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.