nuxt-pglite
nuxt-pglite
A Nuxt module aimed to simplify the use of PGlite.
nuxt-pglite
PGlite tooling for Nuxt. A Postgres you don't run in development, swapped for a real one in production without touching your code; an embedded one on the server or in the browser when it is needed.
๐ Documentation โ nuxt-pglite.s94.dev
Features
- Server โ a lazily created PGlite instance for your Nitro routes (
usePGlite()), configured inserver/pglite.config.tswith your own extensions andinit. - Development socket โ that instance served over the Postgres wire protocol while
nuxt devruns.pg, postgres.js, Drizzle, Kysely,drizzle-kit,psqlreach it throughDATABASE_URL(or a provider's variables), exactly as they reach Postgres in production. With the server side off, nothing of PGlite reaches the build. - Client โ an in-browser PGlite in a Web Worker shared between tabs, with live-query composables, configured in
app/pglite.config.ts. Off by default. - Migrations โ
nuxt-pglite/migrationsapplies a folder of SQL files frominit, with the bookkeeping platforms such as Netlify Database use on deploy, and refuses files edited after they ran. - Testing โ
nuxt-pglite/testingbuilds databases from your config, forks them per test, serves them over the socket;nuxt-pglite/testing/vitestwires one per run. - DevTools โ a tab with an SQL editor and actions that run on the server, in the browser or next to the socket (seed, reset,
drizzle-kitโฆ). - Nuxt 4 and 5 (Nitro 2 and 3), Node, Bun and Deno;
@electric-sql/pgliteas a peer dependency, so you pick the version and the types follow your config.
Install
npx nuxi module add nuxt-pglite
npx nypm install @electric-sql/pglite
Quickstart
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['nuxt-pglite'],
})
// server/api/hello.get.ts
export default defineEventHandler(async () => {
const pg = await usePGlite()
return pg.query('SELECT now()')
})
PGlite in development only, a real Postgres in production:
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['nuxt-pglite'],
pglite: {
server: { enabled: false },
socket: true, // exports DATABASE_URL while `nuxt dev` runs
},
})
// server/pglite.config.ts
import { applyMigrations } from 'nuxt-pglite/migrations'
export default definePGliteServerConfig({
init: (pg) => applyMigrations(pg, 'server/database/migrations'),
})
Guides, recipes and the reference live at nuxt-pglite.s94.dev:
- Getting started โ
- Server โ
- Development socket โ
- Client โ
- DevTools โ
- Migrations โ
- Testing โ
- Deploy โ โ any Postgres, Netlify Database, Neon.
- Reference โ โ config files, module and socket options, exports, hooks, environment.
Development
local development
- Clone this repository
- Install latest LTS version of Node.js
- Enable Corepack using
corepack enable - Install dependencies using
pnpm install(stubsdist/, prepares the playground and the docs) - Develop with
pnpm dev(playground) orpnpm run docs(documentation site) - Run tests using
pnpm test;pnpm lint,pnpm fmtandpnpm typecheckfor the rest - Build with
pnpm build;pnpm dev:preparerestores the stub afterwards
The suite also runs against the Nuxt 5 nightly, locally only until Nuxt 5 reaches a release candidate. Append the overrides to pnpm-workspace.yaml, install without the frozen lockfile, run the checks, then revert both files:
overrides:
nuxt: npm:nuxt-nightly@5x
'@nuxt/kit': npm:@nuxt/kit-nightly@5x
'@nuxt/schema': npm:@nuxt/schema-nightly@5x
pnpm install --no-frozen-lockfile && pnpm typecheck && pnpm test
License
Published under the MIT license. Made by community ๐
๐ค auto updated with automd