How to set environment variables in `wrangler pages dev` for Nuxt + Cloudflare Pages project?

[johnnyicon]

I'm building a Nuxt 3 application deployed on Cloudflare Pages, and I'm having trouble getting environment variables to work with wrangler pages dev dist/ during local development.

Setup

• Nuxt: ^3.15.3
• Cloudflare Pages: Latest
• Wrangler: 3.99.0 (pinned)
• Using PNPM: 9.12.2 as package manager
• Node: 22.13.1
• Building with pnpm build and testing production build with pnpm wrangler pages dev dist

What I've tried

• Set up runtime config in nuxt.config.js:

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      consolaLevel: ''  // should be overridden by NUXT_PUBLIC_CONSOLA_LEVEL
    }
  }
})

• Added environment variable to wrangler.toml:

[vars]
NUXT_PUBLIC_CONSOLA_LEVEL = "WRANGLER.TOML FILE"

• Tried setting it via command line binding:

pnpm wrangler pages dev dist --binding NUXT_PUBLIC_CONSOLA_LEVEL="test value"

• Added variable to .dev.vars and .env files (these work fine in development with pnpm dev)

Testing Code

<script setup lang="ts">
const config = useRuntimeConfig();
const nodeEnv = process.env.NODE_ENV;
</script>

<template>
  <div>
    <h1>Environment Debug: {{ nodeEnv }}</h1>
    <pre>
      CONSOLA_LEVEL: {{ config.public.consolaLevel }}
    </pre>
  </div>
</template>

Results

• In development (pnpm dev): Environment variables work correctly
• In production build test (pnpm wrangler pages dev dist): Environment variable is empty, despite being set in multiple places

According to Nuxt documentation, any environment variable starting with NUXT_PUBLIC_ should automatically override the corresponding runtime config value. This works in development but not when testing the production build with Wrangler.

What am I missing? How can I get environment variables working correctly when using wrangler pages dev?

[BigBallard]

Gonna bump this. Definitely seems like a missing feature or at least not documented somewhere if it is.

[Amar-Gill]

I had the exact same issue before. There is something about wrangler doing a second polyfill. See issue: nuxt/nuxt#29188

Solution was to explicitly set the value in nuxt.config.ts to use process.env.NUXT_PUBLIC_CONSOLA_LEVEL. There's another solution in closed issue depending on your usage of compat flags.

[penalosa]

I think this should be resolved by wrangler@beta and the nodejs_compat_populate_process_env flag (enabled by default in April: https://developers.cloudflare.com/workers/configuration/compatibility-flags/#enable-auto-populating-processenv )—could you give that a go?

[petebacondarwin]

Closing this due lack of response.

[andresvidal]

I don't think this is fixed. Closing this for "lack of response" seems off.

But, I wanted to share something that seems to work for now until wrangler deploy gets fixed with nuxt environment variables.

.env

NUXT_SUPER_SECRET=super-secret-dev-value

nuxt.config.ts

runtimeConfig: {
    superSecret: ""
}

wrangler.toml

...
compatibility_flags = ['nodejs_compat']
...
[vars]
NUXT_SUPER_SECRET="super-secret-prod-value"

server/api/someendpoint.ts

Where config.superSecret works as expected in local dev with local .env and Nuxt's magic NUXT_ env parsing. process.env.NUXT_SUPER_SECRET works as expected in Cloudflare since .env is missing, and no NUXT_ magic interpolation, and superSecret is set to '' in nuxt.config.ts so "process.env.NUXT_SUPER_SECRET" kicks in and pulls variables from Cloudflare environment. Again... hacky but seems to work.

export default defineEventHandler(() => {
const config = useRuntimeConfig();
const someSecretEnvValue = config.superSecret || process.env.NUXT_SUPER_SECRET

return { someSecretEnvValue }
})

[petebacondarwin]

I agree that this is confusing and I struggled to get it to work too.
I think @andresvidal's approach is about the best.
But this is really an issue with Nuxt/Nitro and its documentation, right?