ObSeSSeN
ObSeSSeN
PostsComments
NNuxt
Created by ObSeSSeN on 3/7/2025 in #❓・help
Hydration hell - A simple loading state on a Nuxt UI button
Hi, I have a UButton from Nuxt UI for which I set the loading prop to true initially, then onMounted I switch it to false. This gives me a hydration error and I can't understand why. My actual use case is more complicated that the example I'm sharing, as it involves a state from Pinia and when loaded I put the buttons loading off. But even if I strip away all the state things and have just a button with a loading state which turns of when mounted, I'm facing problems. Button: 
<UButton
  :loading="loading"
  label="User"
/>
<UButton
  :loading="loading"
  label="User"
/>
Script: 
<script lang="ts" setup>
  const loading = ref(true);

  onMounted(async () => {
    loading.value = false;
  });
</script>
<script lang="ts" setup>
  const loading = ref(true);

  onMounted(async () => {
    loading.value = false;
  });
</script>
79 replies