CD
Cloudflare Developers•6d ago
kāné

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/ 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 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>
<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?
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?