N
Nuxt•6mo ago
Isu

nuxthub How to use separated env for local/stage/live

As now I have runtime config 
    runtimeConfig: {
        // @ts-ignore
        backendKey: env.NUXT_LYS_WEARHOUSE_KEY || '',
        rackbeatApiToken: env.NUXT_RACKBEAT_API_TOKEN || '',
        qzTrayCert: process.env.QZ_TRAY_CERT,
        qzTrayKey: process.env.QZ_TRAY_KEY,

        public: {
            env: process.env.NODE_ENV || 'development',
            apiBase: env.NUXT_PUBLIC_API_BASE || '',
            rackbeatApiBase: env.NUXT_RB_API_URL || '',
            cargonizerApiBase: env.NUXT_CARGONIZER_API_URL || '',
            tripletexApiBase: env.NUXT_API_URL || '',
        }
    },
    runtimeConfig: {
        // @ts-ignore
        backendKey: env.NUXT_LYS_WEARHOUSE_KEY || '',
        rackbeatApiToken: env.NUXT_RACKBEAT_API_TOKEN || '',
        qzTrayCert: process.env.QZ_TRAY_CERT,
        qzTrayKey: process.env.QZ_TRAY_KEY,

        public: {
            env: process.env.NODE_ENV || 'development',
            apiBase: env.NUXT_PUBLIC_API_BASE || '',
            rackbeatApiBase: env.NUXT_RB_API_URL || '',
            cargonizerApiBase: env.NUXT_CARGONIZER_API_URL || '',
            tripletexApiBase: env.NUXT_API_URL || '',
        }
    },
But during deploy it reads all things from my local .env file, it skips the envs set in nuxthub. I understand usage for NUXT_PUBLIC_ but how to work with live/stage/local in that case? What prefix to use for non public ?
3 Replies
kapa.ai
kapa.ai•6mo ago
Hi @Isu. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To use separate environment variables for local, staging, and live environments in Nuxt, you should: 1. Use different .env files for each environment (e.g., .env.local, .env.staging, .env.production). When running locally, Nuxt will load the .env file automatically. For other environments, you can specify which file to use with the --dotenv flag, e.g.: 
   npx nuxt dev --dotenv .env.staging
   
   npx nuxt dev --dotenv .env.staging
However, in production, Nuxt does not read .env files—you must set environment variables using your hosting platform's configuration (e.g., dashboard, CLI, or shell) Docs: .env. 2. Prefix environment variables for public and private use: - For variables you want to expose to the client, use the NUXT_PUBLIC_ prefix (e.g., NUXT_PUBLIC_API_BASE). These go under runtimeConfig.public. - For private variables (server-only), use the NUXT_ prefix (e.g., NUXT_LYS_WEARHOUSE_KEY). These go at the root of runtimeConfig (not under public) Docs: runtimeConfig. 3. How Nuxt resolves environment variables: - At runtime, Nuxt will look for environment variables matching your runtimeConfig keys, using the NUXT_ or NUXT_PUBLIC_ prefix. - For example, to override backendKey, set NUXT_LYS_WEARHOUSE_KEY in your environment. For public.apiBase, set NUXT_PUBLIC_API_BASE Docs: runtimeConfig. 4. Production/Stage/Local separation: - In production, set environment variables using your deployment platform (e.g., Vercel, Netlify, Heroku, Docker environment: block, etc.). Do not rely on .env files in production—they are not loaded Docs: .env Production. - For staging, do the same: set the appropriate environment variables for that environment. - Locally, use .env files as needed. Example: 
# .env.local
NUXT_LYS_WEARHOUSE_KEY=local_key
NUXT_PUBLIC_API_BASE=<http://localhost:3000/api>

# .env.staging
NUXT_LYS_WEARHOUSE_KEY=staging_key
NUXT_PUBLIC_API_BASE=<https://staging.example.com/api>

# .env.production
NUXT_LYS_WEARHOUSE_KEY=prod_key
NUXT_PUBLIC_API_BASE=<https://api.example.com>
# .env.local
NUXT_LYS_WEARHOUSE_KEY=local_key
NUXT_PUBLIC_API_BASE=<http://localhost:3000/api>

# .env.staging
NUXT_LYS_WEARHOUSE_KEY=staging_key
NUXT_PUBLIC_API_BASE=<https://staging.example.com/api>

# .env.production
NUXT_LYS_WEARHOUSE_KEY=prod_key
NUXT_PUBLIC_API_BASE=<https://api.example.com>
And in your nuxt.config.ts: 
export default defineNuxtConfig({
  runtimeConfig: {
    backendKey: '', // NUXT_LYS_WEARHOUSE_KEY
    public: {
      apiBase: '', // NUXT_PUBLIC_API_BASE
    }
  }
})
export default defineNuxtConfig({
  runtimeConfig: {
    backendKey: '', // NUXT_LYS_WEARHOUSE_KEY
    public: {
      apiBase: '', // NUXT_PUBLIC_API_BASE
    }
  }
})
Summary:
- Use NUXT_ for private (server-only) variables, and NUXT_PUBLIC_ for public (client-exposed) variables. - In production/staging, set environment variables via your platform, not .env files. - Use the --dotenv flag for custom .env files in local/dev. - Do not use process.env.* directly in your app code; use useRuntimeConfig() instead. For more details, see the official docs on runtime config and environment variables. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•6mo ago
<@219508202830561281> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Isu
IsuOP•6mo ago
Thing is I used NUXT_ and I added new ones in nuxthub, but seems like it reads the ones in my local .env and ignored the one I added in nuxthub - basically it just reads it during build time and deploy when I use npx nuxthub deploy @kapa.ai

Did you find this page helpful?