Broken CSS Nuxt 2 + Vuetify
Hi everyone,
on a work project i am struggling with a bug on which i can not wrap my head around. Simingly randomly (1/10 times) after the login into my application all the css of the application is not applied anymore. The only way to resolve the issue is to reload the page and the css is correctly shown. You can see the problem on the video i attached to the thread
Looking on the console / network / or the nuxt console i see no error. I already tried googling and searching online but can't find anything meaningful. I am certain that at the start of the project while developing it never happened, it basically started one or 2 months ago but i can't explain what is causing it.
Currently i am using
- nuxt 2
- vuetify 2 and some sass customization that are used by my company in a wide range of projects
- boxicons
Do you have any idea on what is causing this? If you need other info just write me
3 Replies
Hi @samuel.deguio. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the information provided in your question and the available knowledge sources, it seems you're experiencing an intermittent CSS issue with Nuxt 2 and Vuetify 2. While I don't have a definitive answer to your specific problem, I can offer some insights and suggestions based on similar issues reported by other Nuxt users.
1. Component naming: One user reported that changing component names from PascalCase (e.g.,
MyComponentOne) to lowercase (e.g., Mycomponentone) resolved their CSS issues Stack Overflow - Nuxt 3 HMR Module not reloading changes (https://stackoverflow.com/questions/78760898). Although this was for Nuxt 3, it might be worth checking your component naming conventions.
2. Font-related issues: Another user found that changing the font type resolved their CSS problems Stack Overflow - items can't be in the center, for mobile emulator but in desktop and devtools, it works well, nuxt3,tailwind (https://stackoverflow.com/questions/78080095). You mentioned using boxicons, so it might be worth investigating if there are any font-loading issues.
3. Vuetify version compatibility: Ensure that your Vuetify version is compatible with Nuxt 2. Some users have reported issues when using older Vuetify components with newer versions Stack Overflow - Why vuetify tag isn't converted to html in browser? (https://stackoverflow.com/questions/77221207).
4. Build and dependency issues: Sometimes, updating dependencies or rebuilding the project can resolve unexpected behavior. One user solved their issue by upgrading Nuxt and Vue versions, then running npm audit fix Stack Overflow - Error with package @babel/plugin-proposal-private-property-in-object even after installing it (https://stackoverflow.com/questions/77283006).
5. SSR vs. Client-side rendering: Since the issue occurs after login and resolves with a page reload, it might be related to the transition between server-side rendering and client-side rendering. You could try experimenting with the ssr option in your Nuxt config to see if it affects the behavior.
6. Investigate potential race conditions: The intermittent nature of the problem suggests there might be a race condition in how styles are applied. You could try adding a small delay before applying styles or initializing Vuetify to see if it makes a difference.
7. Check for conflicting plugins or modules: Review your Nuxt modules and plugins to ensure there are no conflicts that could be interfering with style application.
Given the complexity of your setup and the intermittent nature of the issue, it might be helpful to create a minimal reproduction of the problem and share it on the Nuxt GitHub issues (https://github.com/nuxt/nuxt/issues) or Nuxt discussions (https://github.com/nuxt/nuxt/discussions) for more targeted assistance from the Nuxt community Docs > Community > Getting Help > "Could there be a bug?" (https://nuxt.com/docs/community/getting-help#could-there-be-a-bug).
If you continue to face issues, consider creating a minimal reproduction and reporting it as a potential bug, following the guidelines in the Nuxt documentation Docs > Community > Reporting Bugs > Figure Out What the Cause Might Be (https://nuxt.com/docs/community/reporting-bugs#figure-out-what-the-cause-might-be).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@799239800032460802> Kapa.ai is still learning and improving, please let me know how I did by reacting below.