N

Nuxt•13mo ago•

5 replies

nico

WebP Styling Issues on Cloudflare Pages (Nuxt 3, cloudflare_pages preset)

Hi everyone,

I'm running into a strange issue when deploying my Nuxt 3 app on Cloudflare Pages using the

cloudflare_pages

cloudflare_pages

preset in

nuxt.config.ts

nuxt.config.ts

. It appeared only after migrating my png images to webp.

Problem:

- Locally, everything looks fine (

pnpm run dev

pnpm run dev

and

pnpm run preview

pnpm run preview

).
- On a self-hosted Debian server with Nginx, the deployment also looks fine.
- On Cloudflare Pages, the WebP image loads correctly (confirmed via network inspection), but it gets styled weirdly---it's cut off and visually different from local/Nginx builds. (Screenshots attached)

What I've Tried:

- Moved images from

assets/

assets/

to

public/

public/

→ No change.
- Checked if Cloudflare modifies images (Polish, Image Optimization, Auto WebP) → Not enabled (Free Plan).
- Purged Cloudflare Cache & Used Cache-Control Headers → No change.
- Compared Tailwind classes (object-cover, aspect ratio, etc.) → Looks correct in DevTools.
- I have confirmed, that the rendered DOM looks the same (completely the same TailwindCSS classes, absolutely no difference since in moved the assets to public

Question:

Since I'm using the

cloudflare_pages

cloudflare_pages

preset in

nuxt.config.ts

nuxt.config.ts

, could it be handling CSS/styling differently than other environments?\
Are there any known differences in how Nuxt processes styles when targeting Cloudflare Pages?

If not, what else could cause styling inconsistencies specifically in a Cloudflare Pages deployment compared to local/Nginx builds?