Nuxt•2mo ago

NuxtHub Environment Variables not working

Hey, I have a problem with the deployment of my Nuxt application on NuxtHub: my environment variables aren't working. My Nuxt Config:

runtimeConfig: {
    public: {
      POCKETBASE_ADDRESS: process.env.POCKETBASE_ADDRESS,
      PRESALE_SPECIAL_REGULAR_PRICE: process.env.PRESALE_SPECIAL_REGULAR_PRICE,
      PRESALE_SPECIAL_DISCOUNT_PRICE:
        process.env.PRESALE_SPECIAL_DISCOUNT_PRICE,
      PRESALE_REGULAR_PRICE: process.env.PRESALE_REGULAR_PRICE,
      PRESALE_DISCOUNT_PRICE: process.env.PRESALE_DISCOUNT_PRICE,
    },
  },

runtimeConfig: {
    public: {
      POCKETBASE_ADDRESS: process.env.POCKETBASE_ADDRESS,
      PRESALE_SPECIAL_REGULAR_PRICE: process.env.PRESALE_SPECIAL_REGULAR_PRICE,
      PRESALE_SPECIAL_DISCOUNT_PRICE:
        process.env.PRESALE_SPECIAL_DISCOUNT_PRICE,
      PRESALE_REGULAR_PRICE: process.env.PRESALE_REGULAR_PRICE,
      PRESALE_DISCOUNT_PRICE: process.env.PRESALE_DISCOUNT_PRICE,
    },
  },

And yes, I know that I haven't created all of the environment variables which I'm using, but thats not the problem, because the content of the runtime config looks like this, if I print it in production:

{
POCKETBASE_ADDRESS: '', 
PRESALE_SPECIAL_REGULAR_PRICE: '', 
PRESALE_SPECIAL_DISCOUNT_PRICE: '', 
PRESALE_REGULAR_PRICE: '', 
PRESALE_DISCOUNT_PRICE: ''
}

{
POCKETBASE_ADDRESS: '', 
PRESALE_SPECIAL_REGULAR_PRICE: '', 
PRESALE_SPECIAL_DISCOUNT_PRICE: '', 
PRESALE_REGULAR_PRICE: '', 
PRESALE_DISCOUNT_PRICE: ''
}

2 Replies

kapa.ai•2mo ago

Hi @Leo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I can see you're having issues with environment variables in your Nuxt application deployed on NuxtHub. This is a common issue with runtime configuration in Nuxt 3. The problem is in how you're setting up your runtimeConfig in your nuxt.config.ts file. When you use process.env directly in the config, those values are evaluated at build time, not runtime. This means that if the environment variables aren't available during the build process, they'll be empty strings in your production environment. For Nuxt to properly override your runtime config with environment variables at runtime, you need to follow the Nuxt naming convention for environment variables. Nuxt automatically replaces runtime config values with matching environment variables that follow a specific naming pattern. Here's how to fix your configuration: 1. Update your nuxt.config.ts:

runtimeConfig: {
  public: {
    pocketbaseAddress: '', // will be replaced by NUXT_PUBLIC_POCKETBASE_ADDRESS
    presaleSpecialRegularPrice: '', // will be replaced by NUXT_PUBLIC_PRESALE_SPECIAL_REGULAR_PRICE
    presaleSpecialDiscountPrice: '', // will be replaced by NUXT_PUBLIC_PRESALE_SPECIAL_DISCOUNT_PRICE
    presaleRegularPrice: '', // will be replaced by NUXT_PUBLIC_PRESALE_REGULAR_PRICE
    presaleDiscountPrice: '', // will be replaced by NUXT_PUBLIC_PRESALE_DISCOUNT_PRICE
  },
}

runtimeConfig: {
  public: {
    pocketbaseAddress: '', // will be replaced by NUXT_PUBLIC_POCKETBASE_ADDRESS
    presaleSpecialRegularPrice: '', // will be replaced by NUXT_PUBLIC_PRESALE_SPECIAL_REGULAR_PRICE
    presaleSpecialDiscountPrice: '', // will be replaced by NUXT_PUBLIC_PRESALE_SPECIAL_DISCOUNT_PRICE
    presaleRegularPrice: '', // will be replaced by NUXT_PUBLIC_PRESALE_REGULAR_PRICE
    presaleDiscountPrice: '', // will be replaced by NUXT_PUBLIC_PRESALE_DISCOUNT_PRICE
  },
}

2. Set your environment variables in your hosting environment (NuxtHub) with the NUXT_PUBLIC_ prefix: - NUXT_PUBLIC_POCKETBASE_ADDRESS - NUXT_PUBLIC_PRESALE_SPECIAL_REGULAR_PRICE - NUXT_PUBLIC_PRESALE_SPECIAL_DISCOUNT_PRICE - NUXT_PUBLIC_PRESALE_REGULAR_PRICE - NUXT_PUBLIC_PRESALE_DISCOUNT_PRICE This is a common mistake that many developers make with Nuxt's runtime config, as explained in Alexander Lichter's video about this exact issue Nuxt's runtimeConfig - The most common mistake. Remember that in production, Nuxt doesn't read .env files. You need to set the environment variables directly in your hosting environment. The environment variables must follow the Nuxt naming convention (prefixed with NUXT_ for private config and NUXT_PUBLIC_ for public config) to properly override your runtime config values. Nuxt Documentation on Runtime Config explains this in detail:

Runtime config values are automatically replaced by matching environment variables at runtime. There are two key requirements: 1. Your desired variables must be defined in your nuxt.config. 2. Only a specially-named environment variable can override a runtime config property. That is, an uppercase environment variable starting with NUXT_ which uses _ to separate keys and case changes.

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

kapa.ai•2mo ago

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

Gaming

Programming

NuxtHub Environment Variables not working

Did you find this page helpful?