element-plus-nuxt icon indicating copy to clipboard operation
element-plus-nuxt copied to clipboard

Does El-tabs not support ssr?

Open OnlyWick opened this issue 1 year ago • 9 comments

It render tab nav in client.

Dec-06-2023 22-59-41

OnlyWick avatar Dec 07 '23 00:12 OnlyWick

Some components are dynamically generated based on the content of the slots, and may not be fully rendered on the server side(eq. ElTabs), which needs to be optimized

tolking avatar Dec 08 '23 00:12 tolking

What should I do?

OnlyWick avatar Dec 08 '23 00:12 OnlyWick

You can try optimizing it and then submit a PR to ElementPlus

tolking avatar Dec 08 '23 01:12 tolking

Where I can't locate the problem... It's werid, I have no time to do this. :-(

OnlyWick avatar Dec 08 '23 09:12 OnlyWick

I found it... El-tabs only render in client, because

tabs.tsx

    const {
      children: panes,
      addChild: registerPane,
      removeChild: unregisterPane,
    } = useOrderedChildren<TabsPaneContext>(getCurrentInstance()!, 'ElTabPane')

tab-pane.vue

onMounted(() => {
  tabsRoot.registerPane(pane)
})

onUnmounted(() => {
  tabsRoot.unregisterPane(pane.uid)
})

OnlyWick avatar Dec 08 '23 10:12 OnlyWick

It is indeed here that caused the tab nav not to be fully rendered as a static page on SSR

tolking avatar Dec 15 '23 07:12 tolking

@tolking And has a props.xx.map also have an impact. These maybe can save you time.

OnlyWick avatar Dec 15 '23 10:12 OnlyWick

any updates?

KonstaVadim avatar Feb 12 '24 10:02 KonstaVadim

any updates?

Unfortunately, no.

OnlyWick avatar Feb 12 '24 12:02 OnlyWick

This fixed by element-plus v1.8.0

tolking avatar Aug 21 '24 14:08 tolking