Connect Nuxt to Postgres on Neon
Nuxt is an open source full stack meta framework that enables Vue based web applications. This topic describes how to connect a Nuxt application to a Postgres database on Neon. To create a Neon projec...
Pre-built prompt for connecting Nuxt applications to Neon.
Nuxt is an open-source full-stack meta framework that enables Vue-based web applications. This topic describes how to connect a Nuxt application to a Postgres database on Neon.
To create a Neon project and access it from a Nuxt.js application:
Create a Neon project
Create a Neon project with the Neon CLI or the Console.
Install the CLI (
npm i -g neon), then sign in and create the project:Bash neon login neon projects create --name my-appIf you belong to more than one organization, the CLI prompts you to choose one. To skip the prompt, pass
--org-id <id>(find it withneon orgs list).You'll link this project and pull its credentials in a later step.
- Navigate to the Projects page in the Neon Console.
- Click New Project.
- Specify your project settings and click Create Project.
Create a Nuxt project and add dependencies
- Create a Nuxt project if you do not have one, then change into its directory. The scaffolder is interactive (it asks about the template, package manager, git, and modules); for CI or an AI agent, pass those as flags to run non-interactively. See Create a Nuxt Project for details. The CLI commands in the next step run from this directory.
Bash # Interactive (human): npm create nuxt@latest my-app && cd my-app # Non-interactive (CI / AI agents): npm create nuxt@latest my-app -- --template minimal --packageManager npm --no-gitInit --modules "" && cd my-app - Add a Postgres driver. This guide's examples use the Neon serverless driver, which suits serverless and edge deployments; for long-lived servers,
pgorpostgres.jsare recommended. See Choosing your connection method.npm install @neondatabase/serverlessnpm install postgresnpm install pg
- Create a Nuxt project if you do not have one, then change into its directory. The scaffolder is interactive (it asks about the template, package manager, git, and modules); for CI or an AI agent, pass those as flags to run non-interactively. See Create a Nuxt Project for details. The CLI commands in the next step run from this directory.
Store your Neon credentials
Get your
DATABASE_URLinto a.envfile the app can read.From your project directory, link the app to your Neon project and pull its connection string:
Bash neon link # connects this directory to your project (writes .neon) neon env pull --file .env # writes DATABASE_URL from your default branch into .envNotes:
- Not signed in yet? Run
neon loginfirst. neon linkprompts for an org and project. To skip the prompts, pass--org-id <id>and--project-id <id>(find IDs withneon orgs listandneon projects list), plus--branch <name>to pin a branch, or-yto pin the default branch.- For Nuxt, pass in
--file .envtoneon env pullas it writes to.env.localby default, andnuxt devonly reads.envby default. - Which branch?
neon env pulluses your project's default branch:mainfor CLI-created projects,productionfor Console-created ones (neon branches listshows yours). To use a different branch, runneon checkout <branch>first; it re-pins the branch in.neonso the nextenv pullreads from it.
Add a
.envfile and paste your connection string, which you can copy from the Connect button in the Console nav. For more information, see Connect from any application.Shell DATABASE_URL="postgresql://<user>:<password>@<endpoint_hostname>.neon.tech/<dbname>?sslmode=require&channel_binding=require"- Not signed in yet? Run
Configure the Postgres client
The connection string is a server-side secret, so query it from Nitro server code, which reads
process.env.DATABASE_URLdirectly (noruntimeConfigneeded).This example uses the Neon serverless driver (
@neondatabase/serverless). Create a server utility that holds the database client:server/utils/db.ts import { neon } from '@neondatabase/serverless'; export const sql = neon(process.env.DATABASE_URL!);Then use it in a server API route. Files in
server/utils/are auto-imported, sosqlis available without an import:server/api/version.get.ts export default defineEventHandler(async () => { const [row] = await sql`SELECT version()`; return row; });Run the app
Start the dev server:
Bash npm run devThen open
localhost:3000/api/version. The route returns your Postgres version, confirming the connection:JSON { "version": "PostgreSQL 18.4 on aarch64-unknown-linux-gnu, compiled by gcc ..." }
Next steps
Section titled “Next steps”- Set up Managed Better Auth: Add managed authentication that branches with your database
- Add Object Storage: S3-compatible file storage that branches with your database
- Deploy a Function: Run backend compute next to your database, no separate hosting needed
- Call an LLM with AI Gateway: Access foundation models from Anthropic, OpenAI, Google, and more with one credential
Need help?
Section titled “Need help?”Join our Discord Server to ask questions or see what others are doing with Neon. For paid plan support options, see Support.