I have a nuxt config file that tries to expose all my .env variables to the client.
Some varibles are exposed and I can access them(i’m accessing using useRuntimeConfi()), and some just return "undefined" whenever i try to access them
I do not know what the cause might be, but here’s my code to look at:
nuct.config.ts:
export default defineNuxtConfig({
/*
** Runtime Variables
*/
runtimeConfig: {
apiVersion: process.env.API_VERSION || 'alpha',
cmsUrl: process.env.CMS_URL || 'http://localhost:1337',
cmsToken: process.env.CMS_TOKEN || 'token',
public: {
baseURL: process.env.BASE_URL || 'http://localhost:3000',
auth0Domain: process.env.AUTH0_DOMAIN,
auth0ClientID: process.env.AUTH0_CLIENT_ID,
redirectUri: process.env.REDIRECT_URI || 'http://localhost:3000/',
stagingUri: process.env.STAGING_URI,
localDevUri: process.env.LOCAL_DEV_URI,
cmsUrl: process.env.CMS_URL || 'http://localhost:1337',
}
},
});
my auth.js file:
import { createAuth0 } from '@auth0/auth0-vue';
import { useRuntimeConfig } from 'nuxt/app';
//the below console.log returns undefined
console.log(useRuntimeConfig().stagingUri, useRuntimeConfig().redirectUri;
export default defineNuxtPlugin((nuxtApp) => {
const auth0 = createAuth0({
domain: useRuntimeConfig().auth0Domain,
clientId: useRuntimeConfig().auth0ClientID,
authorizationParams: {
redirect_uri: useRuntimeConfig().redirectUri || useRuntimeConfig().stagingUri,
},
logoutParams: {
returnTo: useRuntimeConfig().redirectUri || useRuntimeConfig().localDevUri,
},
useRefreshTokens: true,
cacheLocation: 'localstorage'
});
if (process.client) {
nuxtApp.vueApp.use(auth0);
}
addRouteMiddleware('auth', () => {
if (process.client) {
auth0.checkSession();
if (!auth0.isAuthenticated.value) {
auth0.loginWithRedirect({
appState: {
target: useRoute().path,
},
});
}
}
});
});
As you can see from the file, the redirectUri property is defined but the stagingUri and localDevUri is undefined. Why is that??
2
Answers
Include the
public
key in youruseRuntimeConfig()
Accessing the
useRuntimeConfig().public
will display all the available public config variables.Got similar issue when I had new data inside
.env & runtimeConfig()
. I got undefined for my new datas.My nuxt version was 3.2.3. I upgrade for the last nuxt version and it work now.
Inside .env :
NUXT_PUBLIC_stagingUri=something
And use
useRuntimeConfig().public.stagingUri
to access indeed