Posted on Sep 23

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

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; });