Guide
Installation
Add the module and PGlite to your Nuxt project.
Add the module
Terminal
npx nuxi module add nuxt-pglite
This installs nuxt-pglite and adds it to modules in your nuxt.config.ts.
Install PGlite
@electric-sql/pglite is a peer dependency: your project decides its version, and the extensions you import come from the same copy.
pnpm add @electric-sql/pglite
npm install @electric-sql/pglite
yarn add @electric-sql/pglite
bun add @electric-sql/pglite
Check the config
Nothing else is required. The server side is on by default, with its data in .data/pglite:
nuxt.config.ts
export default defineNuxtConfig({
modules: ['nuxt-pglite'],
})
Nuxt PGlite needs Nuxt
>=4.6.0. The client side (the in-browser database) also needs the Vite builder, which is Nuxt's default.What to enable
Every piece is opt-in except the server instance, and each is only in your bundle when enabled:
nuxt.config.ts
export default defineNuxtConfig({
modules: ['nuxt-pglite'],
pglite: {
server: {
enabled: true, // `usePGlite()` in server routes (default)
},
socket: { port: 5433 }, // a Postgres URL while `nuxt dev` runs (off by default)
client: {
enabled: true, // `usePGlite()` and live queries in the browser (off by default)
},
},
})
- Only need a database for your server routes? Keep the defaults and go to the server guide.
- Want to develop against PGlite and deploy against Postgres? Read PGlite in dev, Postgres in prod.
- Building a local-first app? Enable the client side.