Save Data to Supabase from Nuxt 3 with Prisma — The Easy Way

#nuxt #prisma #supabase #javascript

When I tried saving data from Nuxt 3 → Supabase (Postgres) → Prisma, I thought it would be simple. But I ran into a few roadblocks — especially around Prisma’s client setup in a serverless Nuxt environment. After quite a struggle, here's the clean version that finally works:

1. Prisma Schema (prisma/schema.prisma)
The first problem I hit: Prisma client wouldn’t generate correctly in Nuxt.
Solution → remove the output line in the generator so Nuxt uses the default ESM client.

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider  = "postgresql"
  url       = env("DATABASE_URL")
  directUrl = env("DIRECT_URL")
}

model Car {
  id            Int    @id @default(autoincrement())
  name          String
  miles         Int
  price         Int
}

Shared Prisma Client (/server/utils/prisma.js) Challenge: Prisma was spinning up multiple instances in dev (hot reload issue). Solution: create a single shared Prisma client and reuse it.

import { PrismaClient } from '@prisma/client';

const globalForPrisma = globalThis;

export const prisma =
  globalForPrisma.prisma ??
  new PrismaClient({ log: ['query'] });

if (process.env.NODE_ENV !== 'production')
  globalForPrisma.prisma = prisma;

API Route (/server/api/car/listings/index.js) Now that Prisma is stable, we can write an API handler that creates new car records.

import { prisma } from '~/server/utils/prisma';

export default defineEventHandler(async (event) => {
  const body = await readBody(event);

  const car = await prisma.car.create({
    data: {
      name: body.name,
      miles: body.miles,
      price: body.price,
    },
  });

  return car;
});