Nuxt•8mo ago

Using a vercel env var in runtime config

Hi there! I'm trying to use env vars like NUXT_ENV_VERCEL_PROJECT_PRODUCTION_URL in my app.vue, and have defined them in my nuxt.config.ts as follows:

export default defineNuxtConfig({
  modules: [],
  runtimeConfig: {
    env: {
      vercel: {
        url: process.env.NUXT_ENV_VERCEL_URL,
        env: process.env.NUXT_ENV_VERCEL_ENV,
        projectProductionUrl: process.env.NUXT_ENV_VERCEL_PROJECT_PRODUCTION_URL,
      }
    },
    public: {
    }
  }
})

export default defineNuxtConfig({
  modules: [],
  runtimeConfig: {
    env: {
      vercel: {
        url: process.env.NUXT_ENV_VERCEL_URL,
        env: process.env.NUXT_ENV_VERCEL_ENV,
        projectProductionUrl: process.env.NUXT_ENV_VERCEL_PROJECT_PRODUCTION_URL,
      }
    },
    public: {
    }
  }
})

I'm then trying to reference these variables in my app.vue, as I wish to read the value of projectProductionUrl in my useSeoMeta I'm able to console.log the values in app.vue, and they appear fine. The following code:

const config = useRuntimeConfig()
console.log('config', config.env)

const config = useRuntimeConfig()
console.log('config', config.env)

Prints this to the backend (non-browser) console

config { vercel: { url: '', env: '', projectProductionUrl: '' } }

config { vercel: { url: '', env: '', projectProductionUrl: '' } }

However I also see in my browser it being logged as well. I can see the public and app, but config.env is undefined (as it is not public) Now, I understand that in order to prevent these 500 errors, I need to put these env vars under public, however as the docs say the following, I'm not sure what to do...

Setting the default of runtimeConfig values to differently named environment variables (for example setting myVar to process.env.OTHER_VARIABLE) will only work during build-time and will break on runtime. It is advised to use environment variables that match the structure of your runtimeConfig object.

https://nuxt.com/docs/guide/going-further/runtime-config I'm unable to change these env vars as they are built into vercel... How can I solve this?

Nuxt

Runtime Config · Nuxt Advanced

Nuxt provides a runtime config API to expose configuration and secrets within your application.

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Using a vercel env var in runtime config