Nuxt 3.16.0 Broke My Vuetify Colors! 🎨
Hey folks, after updating "nuxt": "^3.16.0", my Nuxt project with Vuetify lost all its colors! 😱 Now every button and input is just plain black. I’ve tried removing the theme, adding a theme back, and still, no luck—the colors are gone. Do I need to process Vuetify’s Sass in some custom way with this new Nuxt version? Any tips? 🙏
4 Replies
Hi @Hermes Alves. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
I understand your frustration with the color issues in your Nuxt project after updating to version 3.16.0. Based on the knowledge sources provided, there isn't specific information about Vuetify color issues with Nuxt 3.16.0. However, I can offer some insights that might help resolve your problem.
The issue might be related to how Sass is processed in your project. From the knowledge sources, there are a few approaches you could try:
1. Check your Vuetify installation method: According to one of the sources, the
@invictus.codes/nuxt-vuetify package is no longer maintained. You might want to follow the official Vuetify installation instructions for Nuxt 3 instead Stack Overflow Post.
2. Sass processing: If you're using Sass in your project, you might need to ensure it's properly configured. One of the sources mentions converting SASS to CSS in Nuxt projects, which could be relevant if Vuetify relies on Sass for its theming Stack Overflow Post.
3. Safelist colors: If you're using a UI framework with color variants, you might need to safelist the colors you're using. For example, in Nuxt UI (which is different from Vuetify but follows similar principles), you need to safelist colors in your nuxt.config.ts:
This ensures that color classes aren't purged during build UI Nuxt Getting Started.
4. Check for breaking changes: Nuxt 3.16.0 might have introduced breaking changes that affect how Vuetify's styles are processed. You might want to check the Nuxt and Vuetify release notes for any compatibility issues.
If none of these suggestions help, you might want to try downgrading to your previous Nuxt version until a solution is found, or reach out to the Vuetify community for more specific guidance.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@727670710033580124> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Hey, the problem persists, my Vuetify colors are still AWOL after the "nuxt": "^3.16.0" update. I tried everything Kapa.ai suggested, but nothing brought the colors back. Buttons and inputs are still stuck in black. Any fresh ideas? I’m desperate here! 🙏✨
Hey, I believe there was a bug related to the Unhead v2 upgrade. If you try do a
nuxi upgrade --force it may resolve it (you should be using @unhead/vue rc.12)