search

nuxt / ui

A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.
https://ui.nuxt.com
MIT License
4.07k stars 525 forks source link

Nuxt Content Components Not Styled Properly in Production with Static Site on Cloudflare #2287

Closed MrAhmedElsayed closed 1 month ago

MrAhmedElsayed commented 1 month ago

Environment

Version

1.4.3

Reproduction

https://test-docs-819.pages.dev/

Description

I encountered a styling issue with Nuxt Content components when deploying a static site using npm run generate. Initially, I thought the issue was specific to my project, but after testing the Nuxt UI Pro docs template (without any custom modifications), the problem persisted.

When deploying the site to Cloudflare as a static site, the Nuxt Content components lose their proper styling, leading to an unstyled or poorly styled appearance in production. This issue does not occur in development mode.

Steps to reproduce:

  1. Use the Nuxt UI Pro documentation template.
  2. Deploy the site as a static site using npm run generate.
  3. Host the generated site on Cloudflare.

Expected result: The Nuxt Content components should maintain their correct styling in production.

Actual result: Nuxt Content components appear unstyled or with incorrect styling when deployed.

Any guidance or help with this issue would be appreciated!

Additional context

Screenshot 2024-10-01 at 3 47 53 PM
Screenshot 2024-10-01 at 3 49 32 PM
Screenshot 2024-10-01 at 3 50 49 PM

TOC little icon appear only in small screens:

Screenshot 2024-10-01 at 3 52 00 PM

Logs

No Logs
benjamincanac commented 1 month ago

There is a fix incoming for this in the @nuxtjs/tailwindcss module, in the meantime you can set the resolution to nightly: https://github.com/nuxt-ui-pro/docs/blob/main/package.json#L31

MrAhmedElsayed commented 1 month ago

Hi Benjamin,

Thank you for the suggestion and the heads-up about the upcoming fix. However, as I mentioned in my original post, I'm already using the nightly resolution of @nuxtjs/tailwindcss, as per the default setup of the Nuxt Ul Pro docs template, without any custom modifications. Unfortunately, the styling issue still persists when deploying the static site to Cloudflare.

Interestingly, the site works perfectly when deployed to Vercel, as you can see here: Live Site on Vercel. However, I prefer Cloudflare due to their generous offering for static hosting.

Additionally, I noticed a post on Cloudflare's website outlining a recommended setup for Nuxt projects: Cloudflare Nuxt Deployment Guide. I deployed my site directly without following that guide, with zero configuration. Could this lack of configuration be contributing to the issue?

I would appreciate any further insights or suggestions you may have on resolving this.

Best regards,
Ahmed Elsayed

benjamincanac commented 1 month ago

Sorry but I didn't see anything about the nightly resolution in your original post. I added the resolution on the docs template only yesterday.

Can you share your repository?

I'd recommend using NuxtHub to deploy on CloudFlare, it handles everything for you: https://hub.nuxt.com/

MrAhmedElsayed commented 1 month ago

Hi Benjamin,

Thank you for the follow-up. To clarify, the issue still persists on my end, but I noticed that in the demo of the docs template, the problem was resolved by adding the nightly resolution of @nuxtjs/tailwindcss. I took the same docs template, ran the generate command, and deployed the contents of the public folder, but the styling issue remains when deployed on Cloudflare.

I also tried using NuxtHub, and it’s a great tool! However, for server builds, my app exceeds the 1 MB limit, and I receive the corresponding error during deployment, which is why I’ve been using the generate approach. That said, even with NuxtHub, the same styling issue occurred with the Nuxt Content components in static mode.

Regarding the repository, I’m using the official docs template from Nuxt UI Pro without any custom modifications.

Thanks again for your time, and I appreciate any additional advice.

Best regards,
Ahmed Elsayed

benjamincanac commented 1 month ago

Are you using pnpm?

MrAhmedElsayed commented 1 month ago

I use npm

benjamincanac commented 1 month ago

We found the issue then, the resolutions is for pnpm and yarn. You need to use overrides for NPM.

MrAhmedElsayed commented 1 month ago

Thank you for the clarification! That makes sense now. I wasn’t aware that the resolutions were specific to pnpm and yarn. I'll go ahead and implement the necessary overrides for npm to resolve the issue.

I appreciate your help in pinpointing the problem. I'll test it out and let you know how it goes.

Best regards,
Ahmed Elsayed