Skip to main content
Neon Postgres Docs
current

Search documentation

Type to search this documentation.

On this pageOverview

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:

  1. 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-app

    If you belong to more than one organization, the CLI prompts you to choose one. To skip the prompt, pass --org-id <id> (find it with neon orgs list).

    You'll link this project and pull its credentials in a later step.

    1. Navigate to the Projects page in the Neon Console.
    2. Click New Project.
    3. Specify your project settings and click Create Project.
  2. Create a Nuxt project and add dependencies

    1. 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
    2. Add a Postgres driver. This guide's examples use the Neon serverless driver, which suits serverless and edge deployments; for long-lived servers, pg or postgres.js are recommended. See Choosing your connection method.npm install @neondatabase/serverlessnpm install postgresnpm install pg
  3. Store your Neon credentials

    Get your DATABASE_URL into a .env file 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 .env

    Notes:

    • Not signed in yet? Run neon login first.
    • neon link prompts for an org and project. To skip the prompts, pass --org-id <id> and --project-id <id> (find IDs with neon orgs list and neon projects list), plus --branch <name> to pin a branch, or -y to pin the default branch.
    • For Nuxt, pass in --file .env to neon env pull as it writes to .env.local by default, and nuxt dev only reads .env by default.
    • Which branch? neon env pull uses your project's default branch: main for CLI-created projects, production for Console-created ones (neon branches list shows yours). To use a different branch, run neon checkout <branch> first; it re-pins the branch in .neon so the next env pull reads from it.

    Add a .env file 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"
  4. Configure the Postgres client

    The connection string is a server-side secret, so query it from Nitro server code, which reads process.env.DATABASE_URL directly (no runtimeConfig needed).

    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, so sql is available without an import:

    server/api/version.get.ts
    export default defineEventHandler(async () => {
      const [row] = await sql`SELECT version()`;
      return row;
    });
  5. Run the app

    Start the dev server:

    Bash
    npm run dev

    Then 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 ..." }

Join our Discord Server to ask questions or see what others are doing with Neon. For paid plan support options, see Support.

Suggest an edit

Propose a replacement for this page. The site team reviews it before applying any changes.

Export
Documentation menu