N
Nuxt•2d ago
hackal

Nuxt + Cloudflare Pages + Cloudflare Environments + Wrangler.json

Hi, I'm having issue with deploying to cloudflare pages. How can I specify which environment I use from wrangler.json? My wrangler json 
/**
 * For more details on how to configure Wrangler, refer to:
 * https://developers.cloudflare.com/workers/wrangler/configuration/
 */
{
    "$schema": "node_modules/wrangler/config-schema.json",
    "name": "app-prod-us-*****",
    "main": "./.output/server/index.mjs",
    "compatibility_date": "2025-04-24",
    "assets": {
        "binding": "ASSETS",
        "directory": "./.output/public/"
    },
    "observability": {
        "enabled": true
    },
    "routes": [
        {
            "pattern": "app.*****.com",
            "custom_domain": true
        }
    ],
    "vars": {
        "NUXT_PUBLIC_BASE_URL": "https://us.api.*****.com",
        "NUXT_PUBLIC_COOKIE_DOMAIN": ".*****.com",
        "NUXT_PUBLIC_ENV": "production",
        "NUXT_PUBLIC_WS_BASE_URL": "wss://us.api.*****.com"
    },
    "env": {
        "prod-eu": {
            "routes": [
                {
                    "pattern": "eu.app.*****.com",
                    "custom_domain": true
                }
            ],
            "vars": {
                "NUXT_PUBLIC_BASE_URL": "https://eu.api.*****.com",
                "NUXT_PUBLIC_COOKIE_DOMAIN": ".*****.com",
                "NUXT_PUBLIC_ENV": "production",
                "NUXT_PUBLIC_WS_BASE_URL": "wss://eu.api.*****.com"
            }
        },
        "staging-us": {
            "routes": [
                {
                    "pattern": "develop.app.*****.com",
                    "custom_domain": true
                }
            ],
            "vars": {
                "NUXT_PUBLIC_BASE_URL": "https://staging.us.api.*****.com",
                "NUXT_PUBLIC_COOKIE_DOMAIN": ".*****.com",
                "NUXT_PUBLIC_ENV": "staging",
                "NUXT_PUBLIC_WS_BASE_URL": "wss://staging.us.api.*****.com"
            }
        },
        "staging-eu": {
            "routes": [
                {
                    "pattern": "staging.eu.app.*****.com",
                    "custom_domain": true
                }
            ]
        }
    }
}
/**
 * For more details on how to configure Wrangler, refer to:
 * https://developers.cloudflare.com/workers/wrangler/configuration/
 */
{
    "$schema": "node_modules/wrangler/config-schema.json",
    "name": "app-prod-us-*****",
    "main": "./.output/server/index.mjs",
    "compatibility_date": "2025-04-24",
    "assets": {
        "binding": "ASSETS",
        "directory": "./.output/public/"
    },
    "observability": {
        "enabled": true
    },
    "routes": [
        {
            "pattern": "app.*****.com",
            "custom_domain": true
        }
    ],
    "vars": {
        "NUXT_PUBLIC_BASE_URL": "https://us.api.*****.com",
        "NUXT_PUBLIC_COOKIE_DOMAIN": ".*****.com",
        "NUXT_PUBLIC_ENV": "production",
        "NUXT_PUBLIC_WS_BASE_URL": "wss://us.api.*****.com"
    },
    "env": {
        "prod-eu": {
            "routes": [
                {
                    "pattern": "eu.app.*****.com",
                    "custom_domain": true
                }
            ],
            "vars": {
                "NUXT_PUBLIC_BASE_URL": "https://eu.api.*****.com",
                "NUXT_PUBLIC_COOKIE_DOMAIN": ".*****.com",
                "NUXT_PUBLIC_ENV": "production",
                "NUXT_PUBLIC_WS_BASE_URL": "wss://eu.api.*****.com"
            }
        },
        "staging-us": {
            "routes": [
                {
                    "pattern": "develop.app.*****.com",
                    "custom_domain": true
                }
            ],
            "vars": {
                "NUXT_PUBLIC_BASE_URL": "https://staging.us.api.*****.com",
                "NUXT_PUBLIC_COOKIE_DOMAIN": ".*****.com",
                "NUXT_PUBLIC_ENV": "staging",
                "NUXT_PUBLIC_WS_BASE_URL": "wss://staging.us.api.*****.com"
            }
        },
        "staging-eu": {
            "routes": [
                {
                    "pattern": "staging.eu.app.*****.com",
                    "custom_domain": true
                }
            ]
        }
    }
}
My deploy command (I test locally) 
nuxt build && wrangler deploy
nuxt build && wrangler deploy
I get this error 
- Redirected configurations cannot include environments but the following have been found:
        - prod-eu
        - staging-us
        - staging-eu
  
  
      Such configurations are generated by tools, meaning that one of the tools
      your application is using is generating the incorrect configuration.
      Report this issue to the tool's author so that this can be fixed there.
    - You have specified the environment "staging-us", but are using a redirected configuration,
  produced by a build tool such as Vite.
      You need to set the environment in your build tool, rather than via Wrangler.
      For example, if you are using Vite, refer to these docs:
  https://developers.cloudflare.com/workers/vite-plugin/reference/cloudflare-environments/
- Redirected configurations cannot include environments but the following have been found:
        - prod-eu
        - staging-us
        - staging-eu
  
  
      Such configurations are generated by tools, meaning that one of the tools
      your application is using is generating the incorrect configuration.
      Report this issue to the tool's author so that this can be fixed there.
    - You have specified the environment "staging-us", but are using a redirected configuration,
  produced by a build tool such as Vite.
      You need to set the environment in your build tool, rather than via Wrangler.
      For example, if you are using Vite, refer to these docs:
  https://developers.cloudflare.com/workers/vite-plugin/reference/cloudflare-environments/
https://nuxt.com/deploy/cloudflare and https://nitro.build/deploy/providers/cloudflare have no mentions of environemnt except for --env flag which can be used for specifying enviromnent for the wrangler deploy command. Adding that flag makes no difference.
Nuxt
Deploy Nuxt to Cloudflare
Deploy your Nuxt Application to Cloudflare infrastructure.
Cloudflare - Nitro
Deploy Nitro apps to Cloudflare.
2 Replies
kapa.ai
kapa.ai•2d ago
Hi @hackal. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry, but the knowledge sources do not contain explicit information about integrating Nuxt deployments on Cloudflare Pages with Cloudflare Environments via wrangler.json, nor do they describe how to select or use specific environments from wrangler.json during deployment. The official Nuxt documentation for Cloudflare Pages deployment covers using the cloudflare_pages Nitro preset and connecting a D1 database, but does not mention Cloudflare Environments or how to configure or select them via wrangler.json or deployment commands. The documentation also does not address the error message you are seeing regarding "redirected configurations" and environments in wrangler.json Deploy to Cloudflare Pages. If you need environment-specific configuration in Nuxt, the documentation suggests using per-environment overrides in nuxt.config.ts and selecting environments with the --envName flag during build, but this is separate from Cloudflare's Wrangler environments and does not describe how to bridge the two systems Nuxt Configuration. Based on the available knowledge sources, there is no documented solution for your scenario. You may need to consult Cloudflare's or Wrangler's documentation directly, or seek guidance from the Nuxt or Cloudflare community for this specific integration. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2d ago
<@77852149421191168> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?