1 Migration guide for new Tab component
Sidhanth Rathod edited this page 2025-12-01 12:49:13 +05:30

Since its a single file component, there's no separate Tablist , TabPanel components.

  1. provides two slots instead:
  2. tab-item
  3. tab-panel

each provides the tab binding.

Example code to configure tabpanel :

Before

  <Tabs>
        <TabList />
        <TabPanel v-slot="{ tab }" class="h-full">
            {{ tab.content }}
        </TabPanel>
 </Tabs>

After

use the tab-panel slot

      <Tabs>
        <template #tab-panel="{ tab }">
            {{ tab.content }}
        </template>
      </Tabs>