You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Similar to what was recently addressed in the React package #1086, the Tabs component in the Vue package does not render the default tab content in an SSR context (Nuxt v3 in this case). To replicate, clone the example repo above, run yarn, yarn dev, then open http://localhost:3000. View the page source and you can see that none of the tab panels are rendered in the page source.
Properly rendering the default tab (or ideally, all the tabs but hiding the rest) from the server will result in better SEO and web vital metrics (CLS and LCP, mainly)
The text was updated successfully, but these errors were encountered:
For anyone that comes across this ticket, I was able to find a workaround by adding the static prop to the default TabPanel, which isn't documented. Example:
<TabPanelv-slot="{ selected }"staticas="template">
<divv-show="selected"><!-- Content for default tab --></div>
</TabPanel>
<TabPanelv-slot="{ selected }"as="template">
<divv-if="selected"><!-- Content for another tab not visible on page load --></div>
</TabPanel>
For the others beside the default, you could also add the static prop and use v-show instead of v-if if you think it would be a benefit to have SSR pre-render that content as well in your particular use case.
I still think it would be good to have default SSR support for this so there's feature parity with the React package. Looking at the Vue component code, it looks like the element ref-based indexing currently in place, which requires onMount() to resolve those refs, would need to get replaced with indexing by tab id instead, which it appears is what the React package is doing.
I'd be happy to work on a PR for the doc fix and also my proposed SSR fix if the maintainers think that's the right approach.
What package within Headless UI are you using?
@headlessui/vue
What version of that package are you using?
v1.6.2
What browser are you using?
Chrome
Reproduction URL
https://github.com/cyruscollier/nuxt3-demos/tree/headlessui
Describe your issue
Similar to what was recently addressed in the React package #1086, the Tabs component in the Vue package does not render the default tab content in an SSR context (Nuxt v3 in this case). To replicate, clone the example repo above, run
yarn
,yarn dev
, then open http://localhost:3000. View the page source and you can see that none of the tab panels are rendered in the page source.Properly rendering the default tab (or ideally, all the tabs but hiding the rest) from the server will result in better SEO and web vital metrics (CLS and LCP, mainly)
The text was updated successfully, but these errors were encountered: