Nuxt•4w ago

Env variables not working

Using Nuxt 3.18.1. Hi! I've been struggling with an env variable. I can't seem to make it work when running the preview (npm run build && npm run preview). Locally, it works as it should. Basically, I want a variable to be true on dev and false on prod. For testing purposes, I have it set to true in .env.production, so I can see in an if statement if it works. Here's my current code: .env.development: NUXT_PUBLIC_USE_MOCK_DATA=true .env.production: NUXT_PUBLIC_USE_MOCK_DATA=true nuxt.config.js:

runtimeConfig: {
    public: {
      useMockData: process.env.NUXT_PUBLIC_USE_MOCK_DATA || "false"
    }
  }

runtimeConfig: {
    public: {
      useMockData: process.env.NUXT_PUBLIC_USE_MOCK_DATA || "false"
    }
  }

/api/example/[id].ts:

const config = useRuntimeConfig(event);
const useMockRaw = config.public.useMockData as unknown as string;
const useMockData = useMockRaw.toLowerCase() === "true";

  if (useMockData) {
    console.log("Using mock stock data");
    // something else with mock data
    }
  } else {
    const thirdPartyKey = config.thirdPartyKey;

    data = await $fetch(
      `https://www.example.com/?key=${thirdPartyKey}`,
      {
        headers: { "User-Agent": "request" }
      }
    );
  }

const config = useRuntimeConfig(event);
const useMockRaw = config.public.useMockData as unknown as string;
const useMockData = useMockRaw.toLowerCase() === "true";

  if (useMockData) {
    console.log("Using mock stock data");
    // something else with mock data
    }
  } else {
    const thirdPartyKey = config.thirdPartyKey;

    data = await $fetch(
      `https://www.example.com/?key=${thirdPartyKey}`,
      {
        headers: { "User-Agent": "request" }
      }
    );
  }

I run npm run build && npm run preview and useMockData is always false/falsey. Could I please get some help with this? I'm trying to understand how env variables work. I've read through documentation and research but I can't seem to get it right. TIA!

2 Replies

kapa.ai•4w ago

Hi @mariial. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Your issue is related to how Nuxt 3 handles environment variables in different environments, especially during production preview with npm run build && npm run preview. Key Points from the Documentation - .env files are only loaded automatically in development, build, and generate time. When you run nuxt preview (or npm run preview), the .env file is loaded for convenience, but in actual production (e.g., deployed server), you must set environment variables yourself—they are not loaded from .env files automatically [Nuxt .env docs]. - Environment variable overrides: For runtimeConfig, only environment variables that start with NUXT_ (e.g., NUXT_PUBLIC_USE_MOCK_DATA) will override the config at runtime [Runtime Config Guide]. - Custom .env files: If you want to use a custom .env.production or .env.development file, you must explicitly tell Nuxt which file to use with the --dotenv flag, e.g., npx nuxt preview --dotenv .env.production [.env docs]. Why Your Variable Is Always False When you run npm run build && npm run preview, unless you specify the --dotenv flag, Nuxt will only load the default .env file (not .env.production). So, if your variable is only in .env.production, it won't be picked up unless you tell Nuxt to use that file. How to Fix 1. Make sure your variable is in the default .env file (or use the --dotenv flag): - Rename .env.production to .env before running npm run preview - OR run:

     npx nuxt preview --dotenv .env.production

     npx nuxt preview --dotenv .env.production

2. Check your runtimeConfig: Your config is correct, as long as the environment variable is set at build/preview time:

   runtimeConfig: {
     public: {
       useMockData: process.env.NUXT_PUBLIC_USE_MOCK_DATA || "false"
     }
   }

   runtimeConfig: {
     public: {
       useMockData: process.env.NUXT_PUBLIC_USE_MOCK_DATA || "false"
     }
   }

3. Remember: In actual production (deployed server), you must set NUXT_PUBLIC_USE_MOCK_DATA in your hosting environment's environment variables, as .env files are not loaded [.env docs]. Summary - For local preview, use the --dotenv flag to specify which .env file to load. - For production, set environment variables in your hosting environment. - Only variables prefixed with NUXT_ will override runtimeConfig at runtime. References:
Nuxt .env documentation
Runtime Config Guide
nuxt preview command ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@240285818000769025> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Env variables not working

Did you find this page helpful?