Nuxt•9mo ago

useRuntimeConfig() is returning undefined values

In my .env file I have something like this:

NUXT_PUBLIC_LOGIN_DOMAINS="domain1.com,domain2.com"

NUXT_PUBLIC_LOGIN_DOMAINS="domain1.com,domain2.com"

In my nuxt.config.ts file I have this:

  runtimeConfig: {
    loginDomains: process.env.NUXT_PUBLIC_LOGIN_DOMAINS
  },

  runtimeConfig: {
    loginDomains: process.env.NUXT_PUBLIC_LOGIN_DOMAINS
  },

But when I try to access that value like this:

const { loginDomains } = useRuntimeConfig()
console.log(loginDomains)

const { loginDomains } = useRuntimeConfig()
console.log(loginDomains)

It just prints out undefined. Yet if I have this in my template code on that same page:

{{ loginDomains }}

{{ loginDomains }}

I can see the value show up when I reload the page and then immediately disappear. What the heck? It's like loginDomains does have the value but then it gets set to undefined without me doing anything?

9 Replies

DillyOP•9mo ago

Something messing up on hydration?

browser.mjs?v=30320596:44 warn [Vue warn]: Hydration text mismatch in <main class="q-page q-layout-padding column items-center flex-center" style="min-height: 1313px;"></main>flex 
  - rendered on server: "domain1.com,domain2.com"
  - expected on client: "" 
  at <QPage padding="" class=

browser.mjs?v=30320596:44 warn [Vue warn]: Hydration text mismatch in <main class="q-page q-layout-padding column items-center flex-center" style="min-height: 1313px;"></main>flex 
  - rendered on server: "domain1.com,domain2.com"
  - expected on client: "" 
  at <QPage padding="" class=

Hmm.. this works:

<div>{{ loginDomains }}</div>

<div>{{ loginDomains }}</div>

This doesn't:

<q-page>{{ loginDomains }}</q-page>

<q-page>{{ loginDomains }}</q-page>

manniL•9mo ago

_PUBLIC seems wrong here if you don't use it in public

DillyOP•9mo ago

? runtimeConfig: { supabaseUrl: process.env.NUXT_PUBLIC_SUPABASE_URL, supabaseKey: process.env.NUXT_PUBLIC_SUPABASE_KEY, appUrl: process.env.NUXT_PUBLIC_APP_URL, loginDomains: process.env.NUXT_PUBLIC_LOGIN_DOMAINS, },

manniL•9mo ago

https://www.youtube.com/watch?v=_FYV5WfiWvs

Alexander Lichter

YouTube

Nuxt's runtimeConfig - The most common mistake

🤯 Throughout my projects, consultancies and code reviews I came across lots of interesting findings - also with regards to Nuxt's runtimeConfig feature. Repeatedly I noticed ONE big mistake though which you might do at this very moment in your project. In this video, explain what it is, why you shouldn't do it and how to use runtimeConfig correc...

manniL•9mo ago

it should be process.env.NUXT_SUPABASE_URL not NUXT_PUBLIC_ unless it is in runtimeConfig.public.supabaseUrl

DillyOP•9mo ago

Ok I don't understand but I'll continue to read docs and this vid and hopefully it will click Appreciate the help Ok so why does this work:

{{ $config.public.myValue }}

{{ $config.public.myValue }}

But this doesn't

const { myValue } = useRuntimeConfig()

const { myValue } = useRuntimeConfig()

{{ myValue }}

{{ myValue }}

useRuntimeConfig() doens't work for public runtime config? I see. I can't destructure the public ones

pyplacca•9mo ago

@Dilly, do this instead

const { public: {myValue} } = useRuntimeConfig()

const { public: {myValue} } = useRuntimeConfig()

And also make sure your Nuxt config looks like this:

runtimeConfig: {
  public: {
  }
}

runtimeConfig: {
  public: {
  }
}

DillyOP•9mo ago

Thanks. It's been a little while since I worked with runtimeConfig. I totally forgot there was a public property which was my main issue.

pyplacca•9mo ago

PS: don’t add any secret key inside public because it’ll be exposed in a script element in the DOM

Gaming

Programming

useRuntimeConfig() is returning undefined values