nuxt.js - How to set environment variables in `wrangler pages dev` for Nuxt + Cloudflare Pages project? - Stack Overflow

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?

wranger.toml

As requested, there's really not much in it -- mostly commments.

name = "myapp"
compatibility_date = "2024-11-12"
compatibility_flags = ["nodejs_compat"]
pages_build_output_dir = "./dist"

[vars]
NUXT_PUBLIC_CONSOLA_LEVEL = "WRANGER.TOML FILE"

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?

wranger.toml

As requested, there's really not much in it -- mostly commments.

name = "myapp"
compatibility_date = "2024-11-12"
compatibility_flags = ["nodejs_compat"]
pages_build_output_dir = "./dist"

[vars]
NUXT_PUBLIC_CONSOLA_LEVEL = "WRANGER.TOML FILE"

• environment-variables
• nuxt.js
• cloudflare
• nuxt3.js
• wrangler

Share Improve this question Follow edited Jan 30 at 23:49 John asked Jan 30 at 18:29 JohnJohn 9,4761212 gold badges5757 silver badges8181 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Basically wrangler pages dev dist/ acts like a static http server you can use locally. It doesn't load any of the environment variables. What you'll want to do is run npx nuxi generate (https://nuxt.com/docs/getting-started/deployment#static-hosting) which will load your env variables and then build the static site (which will put it in .output by default). Then you can run wrangler pages dev .output/ and test the site locally.

When you deploy the project however, you can have Cloudflare build your project with your production environment variables: https://developers.cloudflare.com/pages/configuration/build-configuration/ I haven't personally done that before though. Although, arguably, that is the proper way to do it in a CI/CD pipeline, I've just built it locally by specifying the production env file such as npx nuxi generate --dotenv .env.production and then running wrangler pages deploy .output. And another link specifically regarding deploying Nuxt to Cloudflare: https://nuxt.com/deploy/cloudflare