Skip to content
Stackpad Docs

Deploy Nuxt

Stackpad auto-detects Nuxt applications and configures the build automatically.

Quick deploy

  1. Push your Nuxt project to GitHub
  2. Create a new project on Stackpad and select your repo
  3. Stackpad detects nuxt in your dependencies
  4. Your app is live at your-project.your-org.stackpad.eu

Configuration

Stackpad uses your build and start scripts from package.json. The defaults for Nuxt:

{
  "scripts": {
    "build": "nuxt build",
    "start": "node .output/server/index.mjs"
  }
}

The default port is 3000.

Environment variables

Nuxt has runtime config for environment variables:

nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    // Server-side only
    apiSecret: process.env.API_SECRET,
    // Available client-side
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE,
    },
  },
});

Access them in your app:

const config = useRuntimeConfig();
console.log(config.public.apiBase);

Nuxt’s NUXT_PUBLIC_* variables can be changed at runtime (unlike Next.js), but setting them in the Stackpad dashboard and redeploying is the most reliable approach.

Database

Add PostgreSQL to your project and redeploy to get DATABASE_URL. Use it in server routes:

server/api/users.ts
import { Pool } from 'pg';


const pool = new Pool({
  connectionString: process.env.DATABASE_URL,
});


export default defineEventHandler(async () => {
  const result = await pool.query('SELECT * FROM users');
  return result.rows;
});

What’s next?