N
Nuxt2mo ago
Dilly

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
Dilly
Dilly2mo 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
manniL2mo ago
_PUBLIC seems wrong here if you don't use it in public
Dilly
Dilly2mo 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
manniL2mo ago
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
manniL2mo ago
it should be process.env.NUXT_SUPABASE_URL not NUXT_PUBLIC_ unless it is in runtimeConfig.public.supabaseUrl
Dilly
Dilly2mo 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
pyplacca2mo 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: {
}
}
Dilly
Dilly2mo 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
pyplacca2mo ago
PS: don’t add any secret key inside public because it’ll be exposed in a script element in the DOM