1 reply

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

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/

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
    }
  }
})

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"

[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"

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

- Added variable to

.dev.vars

.dev.vars

and

.env

.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>

<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

pnpm dev

): Environment variables work correctly
- In production build test (

pnpm wrangler pages dev dist

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

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

wrangler pages dev

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

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/

wrangler pages dev dist/

during local development.

Setup

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
    }
  }
})

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"

[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"

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

- Added variable to

.dev.vars

.dev.vars

and

.env

.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>

<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

pnpm dev

): Environment variables work correctly
- In production build test (

pnpm wrangler pages dev dist

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

NUXT_PUBLIC

wrangler pages dev

wrangler pages dev

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

Setup

What I've tried

Testing Code

Results

Similar Threads

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

Setup

What I've tried

Testing Code

Results

Similar Threads

Similar Threads

Similar Threads