Vue 3 Transition component with <slot> child throws an error

Question

I've created a custom component that allows me to apply a fading transition without writing always the <transition> component:

    <transition
        mode="out-in"
        enter-active-class="transition-opacity ease-out"
        enter-from-class="opacity-0"
        enter-to-class="opacity-100"
        leave-active-class="transition-opacity ease-in"
        leave-from-class="opacity-100"
        leave-to-class="opacity-0"
      >
        <slot />
    </transition>

But when I use it somewhere like:

    <FadingTransition>
          <div v-show="!isSearchFocused">
              ...
          </div>
    </FadingTransition>

I get the following error:

    [Vue warn]: Hydration node mismatch:
    - Client vnode: div 
    - Server rendered DOM: <!--[--> (start of fragment) 
      at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
      at <Transition mode="out-in" enter-active-class="transition-opacity ease-out duration-75" enter-from-class="opacity-0"  ... > 
      at <FadingTransition> 
      at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
      at <Transition mode="out-in" enter-active-class="ease-out duration-75" enter-from-class="transform -translate-y-1 opacity-0"  ... > 
      at <SearchBar> 
      at <Header> 
      at <App>

    Hydration completed but contains mismatches.

How can I fix it?

Answer 1

Can't say for sure, but it might be an issue with using it inside of its own component? You might try using <transition name="fadingtransition"> and then storing the transition styles in a separate CSS file.