N
Nuxt•2mo ago
dervondenbergen

Overriding Variable in Dev mode

I am trying to find out, wether there is a way on how I can override a environment variable in Nuxt. I already looked through the docs (https://nuxt.com/docs/4.x/guide/going-further/runtime-config#environment-variables) and the GitHub issues of Nuxt and Nitro, but can't find anyone with the same issue. We are using layers and define the layer when building multiple sites: 
const { SITE = "site1" } = process.env;

export default defineNuxtConfig({
    extends: [`./sites/${SITE}`, "./base"],
    …
});
const { SITE = "site1" } = process.env;

export default defineNuxtConfig({
    extends: [`./sites/${SITE}`, "./base"],
    …
});
That way running nuxt dev or nuxt build uses by default site1 as the layer. We then have NPM scripts like npm run dev:site1 → SITE=site1 nuxt dev and npm run dev:site2 → SITE=site2 nuxt dev. The problem is now, that defining a ENV variable like that isn't supported in Windows. There is the cross-env package however I was wondering, wether it is possible or would make sense to override variables via a flag. My basic idea was something like nuxt dev -e SITE=site1, similar to how it works with docker. That way it works independent of OS and wouldn't need extra packages.
Nuxt
Runtime Config · Nuxt Advanced v4
Nuxt provides a runtime config API to expose configuration and secrets within your application.
2 Replies
kapa.ai
kapa.ai•2mo ago
Hi @dervondenbergen. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Nuxt does not currently support overriding arbitrary environment variables directly via a CLI flag like -e SITE=site1 (as you might with Docker). The supported CLI flags for nuxt dev and nuxt build include --envName for selecting environment-specific configuration overrides, and --dotenv for specifying a custom .env file, but not for setting arbitrary environment variables inline via a flag Nuxt dev command docs. For your use case, the recommended approaches are: - Use a .env file: You can create different .env files (e.g., .env.site1, .env.site2) and use the --dotenv flag to load the appropriate one:
  npx nuxt dev --dotenv .env.site1
  
  npx nuxt dev --dotenv .env.site1
This works cross-platform and is the Nuxt-recommended way to manage environment variables for different environments or sites Nuxt .env docs. - Use cross-env: As you mentioned, this is a common solution for cross-platform environment variable setting in npm scripts. - Use the --envName flag: This flag is for selecting environment-specific overrides defined in your nuxt.config.ts (e.g., $env: { site1: { ... } }), but it does not set arbitrary environment variables. It is not a direct replacement for setting SITE in your example Nuxt configuration docs. Summary:
There is no built-in Nuxt CLI flag to set arbitrary environment variables like -e SITE=site1. The recommended cross-platform solutions are to use .env files with the --dotenv flag or use cross-env in your npm scripts. If you want to select config overrides, you can use the --envName flag, but this does not set arbitrary environment variables. If you need this feature, you may consider opening a feature request on the Nuxt GitHub repository. References:
- Nuxt .env file usage and --dotenv flag - Nuxt dev command options - Nuxt configuration and environment overrides ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@306034152820703234> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?