Env variables not working on Cloudflare Pages

[matt-clegg]

Environment

---

• Operating System: Windows_NT
• Node Version: v20.11.1
• Nuxt Version: 3.10.3
• CLI Version: 3.10.1
• Nitro Version: -
• Package Manager: pnpm@8.15.4
• Builder: -
• User Config: devtools, runtimeConfig, nitro
• Runtime Modules: -
• Build Modules: -

---

Reproduction

The reproduction is increadibly simple. Create a new Nuxt app with pnpm dlx nuxi@latest init <project-name>.

nuxt.config.ts

export default defineNuxtConfig({
    devtools: {enabled: true},

    runtimeConfig: {
        public: {
            exampleValue: "unknown"
        }
    },
    
    nitro: {
        preset: "cloudflare-pages"
    }
})

app.vue

<template>
  <div>
    <strong>Config:</strong>
    <pre>{{ config}}</pre>
  </div>
</template>

<script setup lang="ts">
const config = useRuntimeConfig();
</script>

Build the Nuxt app with nuxt build then deploy it to Cloudflare using pnpm dlx wrangler pages deploy dist/.

Describe the bug

When the Nuxt app is deployed to Cloudflare Pages using the cloudflare-pages nitro preset, environment variables aren't passed down into Nuxt. Unless I've missed a step in configuring the Nuxt app or something else in Cloudflare, I would expect the public.exampleValue to be overridden with my environment value.

The hosted Nuxt app can be found here: https://pages-env-demo-55q.pages.dev/

My environment variable in Cloudflare Pages are configured like so:

Additional context

No response

Logs

No response

[Amar-Gill]

Same issue as #25047 (comment)

^ let me know if this works for you.

[matt-clegg]

@Amar-Gill I tried changing my nuxt.config.ts to inclue the process.env, but it's still not passing the value down.

runtimeConfig: {
    public: {
        exampleValue: process.env.NUXT_PUBLIC_EXAMPLE_VALUE || "unknown"
    }
},

[Amar-Gill]

@matt-clegg can you try with just

runtimeConfig: {
    public: {
        exampleValue: process.env.NUXT_PUBLIC_EXAMPLE_VALUE
    }
},

[matt-clegg]

@Amar-Gill I forgot about that! I spotted this video on runtime config. I fixed the nuxt.config.ts file moved the default value into the app.vue file and it's still not being picked up.

runtimeConfig: {
    public: {
        exampleValue: process.env.NUXT_PUBLIC_EXAMPLE_VALUE
    }
},

<template>
  <div>
    <strong>Config:</strong>
    <pre>{{ config.public.exampleValue || "No value" }}</pre>
  </div>
</template>

<script setup lang="ts">
const config = useRuntimeConfig();
</script>

https://pages-env-demo-55q.pages.dev/

[danielroe]

This was already resolved in #26058 and should be present in the next release.