search

P4sca1 / nuxt-headlessui

Headless UI integration for Nuxt. Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
MIT License
171 stars 7 forks source link

Hydration children mismatch in <div>: server rendered element contains fewer child nodes than client vdom. #8

Closed MuhammadKhizar7 closed 2 years ago

MuhammadKhizar7 commented 2 years ago

Hydration children mismatch in <div>:server rendered element contains fewer child nodes than client vdom.

This error cause and also flicker when using tabs when using this module and also when using raw headless UI module

If we wrap client only 

 <ClientOnly>
  <TabGroup>
    .....
  </TabGroup>
</ClientOnly

or use transpile in config 

  build: {
     transpile: ['@headlessui/vue'],
   },

but flicker effect remain same it because of client rendering

P4sca1 commented 2 years ago

Please report issues of Headless UI itself on their GitHub repository: https://github.com/tailwindlabs/headlessui

The following issue might be related: https://github.com/tailwindlabs/headlessui/issues/1479