Deploy a Nuxt application

Kuppit detects a Nuxt application from the nuxt dependency in package.json, builds it with your build script, and starts the Nitro server it produces. Nothing in the repository needs to change for the first deployment.

What Kuppit detects

Review these when Kuppit proposes the service, and afterwards on the service's Settings tab. If your project is a workspace, set Root directory to the application; Kuppit builds from the workspace root with that directory as the app.

Before you deploy

Nuxt's default nuxt build produces the Nitro node-server output Kuppit starts. Keep that preset; a static preset (nuxt generate) produces no server, and a serverless preset produces one that does not listen. Nitro reads PORT and binds to all interfaces on its own, so the PORT contract is already met.

Deploy

Follow the Quickstart: install the GitHub App, choose the repository and branch, confirm the proposal, and choose Deploy analyzed commit. The deployment moves through Queued, Building and Deploying to Live, and the service's hostname opens your application.

Runtime config from variables

Nuxt's runtimeConfig is overridden at runtime by environment variables named after its keys with a NUXT_ prefix, NUXT_PUBLIC_ for the public section. That is exactly what Kuppit's variables are, so the pattern is:

export default defineNuxtConfig({
    runtimeConfig: {
        apiSecret: '',
        public: { siteUrl: '' }
    }
})

On the service's Variables tab, add NUXT_API_SECRET as a secret and NUXT_PUBLIC_SITE_URL as a literal. Both are read when the server starts, so a change takes effect at the next deployment; the tab says Runtime configuration has changed until you Redeploy now.

Variables reach the running server, not the build. A value your nuxt build needs, which is rare, has to come from the repository.

Add a database

On the environment's Overview, Add resource, PostgreSQL. Keep the name database. On the service's Variables tab, add DATABASE_URL as a Reference to database → DATABASE_URL, then redeploy. In a server route:

import { Client } from 'pg'

export default defineEventHandler(async () => {
    const db = new Client({ connectionString: process.env.DATABASE_URL })
    await db.connect()
    const { rows } = await db.query('select now()')
    await db.end()
    return rows[0]
})

PostgreSQL has the six variables a database exposes and how references resolve.

From here

Every push to the branch deploys again, and every pull request gets a preview environment on its own hostname. When a deployment fails, Troubleshooting has the sentence it failed with.