Cloudflare Developers•10mo ago

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•10mo 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•10mo ago

https://user-images.githubusercontent.com/2633564/260888400-75067a55-7c61-4973-8d0e-9ef0bc169fe0.png

crossbeau•10mo 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•5mo ago

@crossbeau Did you find an answer ?

Gaming

Programming

Nuxt JS on Pages environment variables not working