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 project and access it from a Next.js application:

1. Create a Neon project
2. Create a Nuxt project and add dependencies
3. Configure a Postgres client
4. Run the app

Create a Neon project

If you do not have one already, create a Neon project. Save your connection details including your password. They are required when defining connection settings.

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

Create a Nuxt project and add dependencies

1. Create a Nuxt project if you do not have one. For instructions, see Create a Nuxt Project, in the Nuxt documentation.

2. Add project dependencies using one of the following commands:

   Neon serverless driver

   postgres.js

   node-postgres

   npm install @neondatabase/serverless

Store your Neon credentials

Add a .env file to your project directory and add your Neon connection string to it. You can find the connection string for your database in the Connection Details widget on the Neon Dashboard. For more information, see Connect from any application.

DATABASE_URL="postgresql://<user>:<password>@<endpoint_hostname>.neon.tech:<port>/<dbname>?sslmode=require"

Configure the Postgres client

First, make sure you load the DATABASE_URL from your .env file in Nuxt’s runtime configuration:

In nuxt.config.js:

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

Next, use the Neon serverless driver to create a database connection. Here’s an example configuration:

import { neon } from '@neondatabase/serverless';

export default defineCachedEventHandler(
  async (event) => {
    const { databaseUrl } = useRuntimeConfig();
    const db = neon(databaseUrl);
    const result = await db`SELECT version()`;
    return result;
  },
  {
    maxAge: 60 * 60 * 24, // cache it for a day
  }
);

Run the app

When you run npm run dev you can expect to see the following on localhost:3000:

PostgreSQL 16.0 on x86_64-pc-linux-gnu, compiled by gcc (Debian 10.2.1-6) 10.2.1 20210110, 64-bit

Source code

You can find the source code for the applications described in this guide on GitHub.

• Get started with Nuxt and Neon

  Get started with Nuxt and Neon