Nuxt JS on Pages environment variables not working

I have correctly set all my env vars, my code seems accurate as far as i can tell yet no matter what i do pages will not use my variables
4 Replies
crossbeau
crossbeauOP15mo ago
Code samples and proof i have values set here - https://github.com/unjs/nitro/issues/272#issuecomment-1679889977
GitHub
Support cloudflare environment variables · Issue #272 · unjs/nitro
Reference docs: https://developers.cloudflare.com/workers/platform/environment-variables/ Related: nuxt/nuxt#14011 Normally, we allow extending runtime config using Node.js environment variables (p...
crossbeau
crossbeauOP15mo ago
server route sample:
server/routes/signin.js

import { createNonce } from '~/utils/auth';
import buildUrl from 'build-url';
import { defineEventHandler, setCookie } from 'h3';

export default defineEventHandler(async (event) => {
const runtimeConfig = useRuntimeConfig(event);
const nonce = createNonce();
setCookie(event, 'nonce', nonce, { secure: true });

const url = buildUrl(`https://${runtimeConfig.auth0.domain}`, {
path: 'authorize',
queryParams: {
client_id: runtimeConfig.auth0.clientID,
response_type: '',
redirect_uri: runtimeConfig.auth0.redirectUrl,
scope: '',
audience: runtimeConfig.auth0.audience,
nonce: nonce,
},
});

return sendRedirect(event, url, 302);
});
server/routes/signin.js

import { createNonce } from '~/utils/auth';
import buildUrl from 'build-url';
import { defineEventHandler, setCookie } from 'h3';

export default defineEventHandler(async (event) => {
const runtimeConfig = useRuntimeConfig(event);
const nonce = createNonce();
setCookie(event, 'nonce', nonce, { secure: true });

const url = buildUrl(`https://${runtimeConfig.auth0.domain}`, {
path: 'authorize',
queryParams: {
client_id: runtimeConfig.auth0.clientID,
response_type: '',
redirect_uri: runtimeConfig.auth0.redirectUrl,
scope: '',
audience: runtimeConfig.auth0.audience,
nonce: nonce,
},
});

return sendRedirect(event, url, 302);
});
app.vue sample

<template>
<NuxtLayout>
<NuxtLoadingIndicator />
<NuxtPage />
</NuxtLayout>
</template>

<script setup lang="ts">
const route = useRoute();
const runtimeConfig = useRuntimeConfig();
const domain = runtimeConfig.public.domain;

useHead({
titleTemplate: '%s - Leagued',
viewport: 'width=device-width, initial-scale=1',
charset: 'utf-8',
htmlAttrs: {
lang: 'en',
},
link: [
{
rel: 'apple-touch-icon',
sizes: '180x180',
href: '/favicon/apple-touch-icon.png',
},
{
rel: 'icon',
type: 'image/png',
sizes: '32x32',
href: '/favicon/favicon-32x32.png',
},
{
rel: 'manifest',
type: 'image/png',
sizes: '16x16',
href: '/favicon/favicon-16x16.png',
},
{ rel: 'manifest', href: '/favicon/site.webmanifest' },
{
rel: 'mask-icon',
color: '#5bbad5',
href: '/favicon/safari-pinned-tab.svg',
},
{ rel: 'shortcut icon', href: '/favicon/favicon.ico' },
{ name: 'msapplication-TileColor', content: '#ffc40d' },
{ name: 'msapplication-config', href: '/favicon/browserconfig.xml' },
{ name: 'theme-color', content: '#ffffff' },
{
rel: 'canonical',
href: () => `https://example.com${route.path}`,
},
],
});
</script>
app.vue sample

<template>
<NuxtLayout>
<NuxtLoadingIndicator />
<NuxtPage />
</NuxtLayout>
</template>

<script setup lang="ts">
const route = useRoute();
const runtimeConfig = useRuntimeConfig();
const domain = runtimeConfig.public.domain;

useHead({
titleTemplate: '%s - Leagued',
viewport: 'width=device-width, initial-scale=1',
charset: 'utf-8',
htmlAttrs: {
lang: 'en',
},
link: [
{
rel: 'apple-touch-icon',
sizes: '180x180',
href: '/favicon/apple-touch-icon.png',
},
{
rel: 'icon',
type: 'image/png',
sizes: '32x32',
href: '/favicon/favicon-32x32.png',
},
{
rel: 'manifest',
type: 'image/png',
sizes: '16x16',
href: '/favicon/favicon-16x16.png',
},
{ rel: 'manifest', href: '/favicon/site.webmanifest' },
{
rel: 'mask-icon',
color: '#5bbad5',
href: '/favicon/safari-pinned-tab.svg',
},
{ rel: 'shortcut icon', href: '/favicon/favicon.ico' },
{ name: 'msapplication-TileColor', content: '#ffc40d' },
{ name: 'msapplication-config', href: '/favicon/browserconfig.xml' },
{ name: 'theme-color', content: '#ffffff' },
{
rel: 'canonical',
href: () => `https://example.com${route.path}`,
},
],
});
</script>
ChronicStone
ChronicStone11mo ago
@crossbeau Did you find an answer ?
Want results from more Discord servers?
Add your server