Topic — Nuxt 3 x Directus x Cloudflare Pages integration
Project — guess-what-frontend
Tools — Terraform, Cloudflare Provider v5, Nuxt 3

Problem Description

After deploying the Nuxt 3 project to Cloudflare Pages, Directus data was not displaying.

Pitfall Log

Issue 1: Wrong Terraform field name (environment_variables → env_vars)

Cloudflare provider v5 renamed this field. The old name environment_variables is not recognized — terraform plan shows nothing, and the Dashboard shows no environment variables after apply.

# Wrong (provider v4 and earlier)
deployment_configs = {
  production = {
    environment_variables = {
      DIRECTUS_URL = {
        value = var.directus_url
        type  = "secret_text"
      }
    }
  }
}

# Correct (provider v5)
deployment_configs = {
  production = {
    env_vars = {
      NUXT_PUBLIC_DIRECTUS_URL = {
        value = var.directus_url
        type  = "plain_text"
      }
    }
  }
}

Issue 2: Wrong environment variable name (DIRECTUS_URL → NUXT_PUBLIC_DIRECTUS_URL)

In Nuxt 3, runtimeConfig.public.* values map to environment variables with the NUXT_PUBLIC_ prefix followed by the camelCase key converted to uppercase with underscores.

• Wrong: DIRECTUS_URL
• Correct: NUXT_PUBLIC_DIRECTUS_URL

Variables prefixed with NUXT_PUBLIC_ get bundled into the frontend bundle and are effectively public, so using type = "plain_text" is more semantically accurate.

Issue 3: Incorrectly adding the Cloudflare nitro preset

nitro: { preset: 'cloudflare-pages' } is for SSR deployments. This project uses npm run generate (static generation) — adding this preset will break things.

Final Configuration

Terraform (main.tf)

deployment_configs = {
  production = {
    env_vars = {
      NUXT_PUBLIC_DIRECTUS_URL = {
        value = var.directus_url
        type  = "plain_text"
      }
    }
  }
  preview = {
    env_vars = {
      NUXT_PUBLIC_DIRECTUS_URL = {
        value = var.directus_url
        type  = "plain_text"
      }
    }
  }
}

nuxt.config.ts

runtimeConfig: {
  public: {
    directusUrl: '',  // maps to NUXT_PUBLIC_DIRECTUS_URL
  },
},

Usage in Code

const config = useRuntimeConfig()
config.public.directusUrl

Local Development (.env)

NUXT_PUBLIC_DIRECTUS_URL=https://<URL>

Cloudflare Pages Build Settings

build_command   = "npm run generate"
destination_dir = "dist"

Do not add a trailing / to the environment variable value. Set it in the Production build configuration.

Key Concepts

When data is fetched in static generation

nuxt generate fetches from the Directus API at build time and writes the data into HTML — it does not fetch at runtime. Therefore, environment variables must be accessible during the Cloudflare Pages build phase, and every change to an environment variable requires triggering a new deployment to take effect.

Directus Public Role Permissions

Directus does not grant public access by default. Go to Settings → Access Control → Public and grant Read permission for the relevant collection. If you need to protect data, use token-based authentication with server-side fetching (/server/api/).