Nuxt•3d ago

Add standalone chip to tabs text in nuxt-ui

Can I?

5 Replies

Hi @pearbender. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can add a chip to the tab text in Nuxt UI, but the knowledge sources do not show a built-in prop or slot on the Tabs component specifically for adding a standalone chip directly to the tab label. However, since the Tabs component's items accept a label (which can be a string), and you can use custom slots for more advanced content, you can achieve this by using the custom slot feature. For example, you can define a custom slot for a tab and place a UChip next to the label:

<script setup lang="ts">
import type { TabsItem } from '@nuxt/ui'

const items = [
  {
    label: 'Inbox',
    slot: 'inbox' as const
  },
  {
    label: 'Sent',
    slot: 'sent' as const
  }
] satisfies TabsItem[]
</script>

<template>
  <UTabs :items="items" class="w-full">
    <template #inbox="{ item }">
      <span>{{ item.label }}</span>
      <UChip text="5" standalone inset size="sm" class="ml-2" />
    </template>
    <template #sent="{ item }">
      <span>{{ item.label }}</span>
    </template>
  </UTabs>
</template>

<script setup lang="ts">
import type { TabsItem } from '@nuxt/ui'

const items = [
  {
    label: 'Inbox',
    slot: 'inbox' as const
  },
  {
    label: 'Sent',
    slot: 'sent' as const
  }
] satisfies TabsItem[]
</script>

<template>
  <UTabs :items="items" class="w-full">
    <template #inbox="{ item }">
      <span>{{ item.label }}</span>
      <UChip text="5" standalone inset size="sm" class="ml-2" />
    </template>
    <template #sent="{ item }">
      <span>{{ item.label }}</span>
    </template>
  </UTabs>
</template>

This approach uses the custom slot for the tab and places a standalone chip next to the tab text. The UChip component supports the standalone and inset props, which are commonly used for inline display in other components like Select, InputMenu, and SelectMenu, as shown in the documentation. This method is consistent with how chips are used in other Nuxt UI components, even though there is no explicit example for tabs in the documentation Chip usage Tabs custom slot. If you need the chip to be part of the tab label in a more automated way (e.g., via a prop), the knowledge sources do not show such a feature. Custom slots are the recommended approach. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3d ago

<@779279431419559947> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

pearbenderOP•3d ago

@kapa.ai this appears to set the tab content, not the tab text itself

kapa.ai•3d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You're correct—using the custom slot as shown in the previous example customizes the tab panel content, not the tab trigger (the tab text itself). According to the Nuxt UI Tabs documentation, there is currently no built-in prop or slot specifically for injecting a standalone chip directly into the tab trigger/label area. The available customization for the tab trigger is limited to properties like label, icon, avatar, and class, but not arbitrary slot content like a chip component Tabs API. The documentation does not provide an example or mention a way to render a component (such as UChip) directly inside the tab trigger/label. Custom slots in UTabs are for tab content, not the tab button itself. In summary:
Based on the current knowledge sources, you cannot directly add a standalone chip to the tab text/trigger in Nuxt UI Tabs using a built-in feature or slot. You may need to wait for future updates or consider a workaround, such as customizing the component yourself, but this is not covered in the official documentation. If you need to display a chip in the tab trigger, the knowledge sources do not provide a supported method for this at this time. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3d ago

<@779279431419559947> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Add standalone chip to tabs text in nuxt-ui

Did you find this page helpful?