Skip to content
Discord Get Started

Nuxt

Nuxt connects to DB9 through any standard PostgreSQL driver over pgwire. DB9 is PostgreSQL-compatible, so no special adapter is needed.

This guide shows how to set up a Nuxt 3 app with DB9 using Prisma and Drizzle.

Terminal
db9 create --name nuxt-app

Get the connection string:

Terminal
db9 db status nuxt-app

Set the connection string as an environment variable:

.env
DATABASE_URL="postgresql://nuxt-app.admin:YOUR_PASSWORD@pg.db9.io:5433/postgres?sslmode=require"
Terminal
npx nuxi@latest init nuxt-db9
cd nuxt-db9
npm install prisma @prisma/client
npx prisma init

Define your schema:

prisma/schema.prisma
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}
model User {
id Int @id @default(autoincrement())
email String @unique
name String
createdAt DateTime @default(now())
}

Push the schema and generate the client:

Terminal
npx prisma db push
npx prisma generate

Create a server utility to share the Prisma instance:

server/utils/prisma.ts
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();
export default prisma;
server/api/users.get.ts
import prisma from '~/server/utils/prisma';
export default defineEventHandler(async () => {
return await prisma.user.findMany({
orderBy: { createdAt: 'desc' },
});
});
server/api/users.post.ts
import prisma from '~/server/utils/prisma';
export default defineEventHandler(async (event) => {
const body = await readBody(event);
return await prisma.user.create({
data: {
email: body.email,
name: body.name,
},
});
});

Call the API routes from a page using useFetch:

pages/users.vue
<script setup lang="ts">
const { data: users, refresh } = await useFetch('/api/users');
async function addUser() {
await $fetch('/api/users', {
method: 'POST',
body: { name: 'Alice', email: 'alice@example.com' },
});
await refresh();
}
</script>
<template>
<div>
<button @click="addUser">Add User</button>
<ul>
<li v-for="user in users" :key="user.id">
{{ user.name }} ({{ user.email }})
</li>
</ul>
</div>
</template>
  • Server-side only: All database access happens in the server/ directory. Nuxt server routes and utilities never ship to the client, so your connection string stays private.
  • Port 5433: DB9 uses port 5433, not the default PostgreSQL port 5432. Verify your DATABASE_URL includes the correct port.
  • TLS required: Always include sslmode=require in your connection string for DB9’s hosted service.
  • Nitro server preset: Use the Node.js preset for deployment. Edge presets (Cloudflare Workers, Deno Deploy) do not support raw TCP connections required by pgwire. Set nitro.preset in nuxt.config.ts:
nuxt.config.ts
export default defineNuxtConfig({
nitro: {
preset: 'node-server',
},
});

DB9 uses port 5433, not 5432. Check that your DATABASE_URL includes :5433.

DB9 requires pgwire (TCP), which is not available in edge runtimes. Switch to the node-server or node-cluster Nitro preset.

Environment variables not available in Nitro

Section titled “Environment variables not available in Nitro”

Nitro reads .env files automatically in development. For production, set DATABASE_URL through your hosting platform’s environment variable configuration. If needed, add runtimeConfig in nuxt.config.ts:

nuxt.config.ts
export default defineNuxtConfig({
runtimeConfig: {
databaseUrl: process.env.DATABASE_URL,
},
});

Then access it in server routes with useRuntimeConfig().databaseUrl.