Nuxt 3 + Cloudflare Pages: wrangler pages dev Ignoring NUXT_PUBLIC_* Variables

For Workers & Pages, what is the name of the domain?

localhost

What is the issue or error you’re encountering

I’m developing a Nuxt 3 application and deploying it on Cloudflare Pages, but I’m encountering issues with environment variables when running wrangler pages dev dist/ to preview the production build locally. Despite setting NUXT_PUBLIC_CONSOLA_LEVEL in multiple locations, it remains empty or undefined in the app when using wrangler pages dev. This behavior is different from running pnpm dev, where the variable is correctly loaded.

What steps have you taken to resolve the issue?

I’ve attempted the following approaches to ensure NUXT_PUBLIC_CONSOLA_LEVEL is set correctly:

Runtime config in nuxt.config.ts:

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

Setting the variable in wrangler.toml:

[vars]
NUXT_PUBLIC_CONSOLA_LEVEL = "WRANGLER.TOML FILE"

Using command-line binding:

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

Adding the variable to .dev.vars and .env (both work fine in pnpm dev but not in wrangler pages dev).

What are the steps to reproduce the issue?

Set up environment variables in wrangler.toml and/or .dev.vars.

Run the development server:

pnpm wrangler pages dev dist/
Inspect the runtime config inside a Nuxt component:
<script setup lang="ts">
const config = useRuntimeConfig();
</script>

<template>
  <div>
    <pre>
      CONSOLA_LEVEL: {{ config.public.consolaLevel }}
    </pre>
  </div>
</template>

Expected Result:
The variable should appear in config.public.consolaLevel.

Actual Result:
The value is empty or undefined.

I’ve encountered the same issue and my workaround for this is to manually add the environment variables to the nuxt.config.ts

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      consolaLevel: process.env.NUXT_PUBLIC_CONSOLA_LEVEL || ''
    }
  }
});

I’m not sure if this will work for you, but it did for me.