Nuxt•4w ago

classes on div disappear seemingly at random

I have these three flex divs, and at random refreshes some of them will just have text-center instead of the classes defined

 <div class="flex justify-between text-md/0">
      <div class="font-bold">TOTAL</div>
      <div class="text-right font-bold">{{ useDanskPris(total) }} kr</div>
    </div>
    <div class="flex justify-between text-md/0 mb-4">
      <div>{{tilfældigtElement(betalingsMidler)}}</div>
      <div class="text-right">{{ useDanskPris(total) }} kr</div>
    </div>
    <div class="flex justify-between text-md/0">
      <div>Moms 25% ({{ useDanskPris(momsBasis) }}) </div>
      <div class="text-right">{{ useDanskPris(moms) }} kr</div>
    </div>

 <div class="flex justify-between text-md/0">
      <div class="font-bold">TOTAL</div>
      <div class="text-right font-bold">{{ useDanskPris(total) }} kr</div>
    </div>
    <div class="flex justify-between text-md/0 mb-4">
      <div>{{tilfældigtElement(betalingsMidler)}}</div>
      <div class="text-right">{{ useDanskPris(total) }} kr</div>
    </div>
    <div class="flex justify-between text-md/0">
      <div>Moms 25% ({{ useDanskPris(momsBasis) }}) </div>
      <div class="text-right">{{ useDanskPris(moms) }} kr</div>
    </div>

You can test it out on the site: https://retskaffen.dk/

3 Replies

kapa.ai•4w ago

Hi @nicholai. 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 the knowledge sources, I can offer some insights into your issue with disappearing classes in Nuxt. This problem seems to be related to hydration issues, which can occur in Nuxt applications. The issue you're experiencing, where classes like flex justify-between are sometimes replaced with just text-center, is likely due to a hydration mismatch between the server-rendered HTML and the client-side Vue application. A similar issue was reported in this Stack Overflow post: Adding '@vite-pwa/nuxt' to nuxt 3 project causes hydration errors. While your specific problem isn't exactly the same, it shares similarities in terms of class mismatches during hydration. To address this issue, you could try the following approaches: 1. Ensure that you're not destructuring props, as mentioned in this Stack Overflow answer: Nuxt 3/Vue 3 Reactivity issue, while rendering component in v-for loop. Although this might not be directly related to your problem, it's a good practice to follow in Nuxt 3 applications. 2. If you're using any state management, consider using useState from Nuxt to create shared state between server and client. This approach was suggested in another Stack Overflow answer: Inconsistent variable values in Nuxt 3 components. 3. Check if you're using any PWA-related modules like @vite-pwa/nuxt. If so, they might be causing hydration issues as mentioned in the first linked Stack Overflow post. 4. Review your Nuxt configuration, especially if you've recently added new modules or changed rendering settings. 5. Ensure that your component's logic for applying classes is consistent between server-side rendering and client-side hydration. If the problem persists after trying these approaches, you might want to create a minimal reproduction of the issue and seek further assistance from the Nuxt community or file an issue on the Nuxt GitHub repository. Remember to always test your application thoroughly in different environments and on various devices to catch these kinds of inconsistencies early in the development process. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@100302176047337472> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

nicholaiOP•4w ago

I think I fixed this by moving all randomised content serverside.

Gaming

Programming

classes on div disappear seemingly at random

Did you find this page helpful?