nuxt.config.ts - runtimeconfig - .env

[pastel cloud]

In my Nuxt config file, when i want to leave the config empty and override it using my .env file, it works only on localhost, and does not work on my VPS when i build it.

NUXT_PUBLIC_API_BASE

[surreal river]

Hi @pastel cloud. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

This behavior is expected in Nuxt 3 and 4. The .env file is only used during development, build, and generate time. When you run your built app in production (such as on your VPS), Nuxt does not read the .env file. Instead, you must set environment variables directly in your production environment.

How it works:

• Development/Build: .env is loaded automatically, and variables like NUXT_PUBLIC_API_BASE override your runtimeConfig defaults.
• Production (after build): .env is not loaded. You must set environment variables (e.g., NUXT_PUBLIC_API_BASE) using your VPS or hosting provider's environment configuration.

Example:

In your nuxt.config.ts:

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      apiBase: '', // Will be overridden by NUXT_PUBLIC_API_BASE
    },
  },
})

In your .env (used only for dev/build):

NUXT_PUBLIC_API_BASE=<https://api.example.com>

On your VPS, you must set the environment variable before starting the server:

NUXT_PUBLIC_API_BASE=<https://api.example.com> node .output/server/index.mjs

or use your process manager (like pm2, systemd, etc.) to set the variable.

Key points:

• .env is ignored in production runtime.
• Use real environment variables in production.
• Only variables prefixed with NUXT_ will override runtimeConfig in production.

For more details, see the official docs: Nuxt 4.x Guide: .env, Runtime Config

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: