Nuxt•3mo ago

UTabs

How do I use different components for UTabs in Nuxt UI?

21 Replies

Hi @aonghas. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To use different components or custom content for each tab in the UTabs component from Nuxt UI, you can leverage the slot property on your tab items and provide named slots in your template. This allows you to render different components or custom layouts for each tab. Here's how you can do it: 1. Define your tab items with the slot property:

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

const items = [
  {
    label: 'Account',
    description: 'Make changes to your account here. Click save when you\'re done.',
    icon: 'i-lucide-user',
    slot: 'account' as const
  },
  {
    label: 'Password',
    description: 'Change your password here. After saving, you\'ll be logged out.',
    icon: 'i-lucide-lock',
    slot: 'password' as const
  }
] satisfies TabsItem[]
</script>

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

const items = [
  {
    label: 'Account',
    description: 'Make changes to your account here. Click save when you\'re done.',
    icon: 'i-lucide-user',
    slot: 'account' as const
  },
  {
    label: 'Password',
    description: 'Change your password here. After saving, you\'ll be logged out.',
    icon: 'i-lucide-lock',
    slot: 'password' as const
  }
] satisfies TabsItem[]
</script>

2. Provide a template for each slot, where you can use any component or markup:

<template>
  <UTabs :items="items" variant="link" class="gap-4 w-full" :ui="{ trigger: 'grow' }">
    <template #account="{ item }">
      <!-- You can use any component or custom content here -->
      <p class="text-muted mb-4">
        {{ item.description }}
      </p>
      <UForm>
        <!-- ... -->
      </UForm>
    </template>

    <template #password="{ item }">
      <!-- Different component or content for this tab -->
      <p class="text-muted mb-4">
        {{ item.description }}
      </p>
      <UForm>
        <!-- ... -->
      </UForm>
    </template>
  </UTabs>
</template>

<template>
  <UTabs :items="items" variant="link" class="gap-4 w-full" :ui="{ trigger: 'grow' }">
    <template #account="{ item }">
      <!-- You can use any component or custom content here -->
      <p class="text-muted mb-4">
        {{ item.description }}
      </p>
      <UForm>
        <!-- ... -->
      </UForm>
    </template>

    <template #password="{ item }">
      <!-- Different component or content for this tab -->
      <p class="text-muted mb-4">
        {{ item.description }}
      </p>
      <UForm>
        <!-- ... -->
      </UForm>
    </template>
  </UTabs>
</template>

With this approach, each tab can render a completely different component or layout, giving you full flexibility over the content of each tab panel. You can also use the #content slot for a more generic customization if you don't need per-tab slots. For more details and examples, see the official documentation: UTabs with custom slot and UTabs with content slotUTabs Examples. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

aonghasOP•3mo ago

@kapa.ai can you make the tabs content slide?

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm sorry, but the knowledge sources do not explicitly mention a built-in way to make the content of UTabs slide (i.e., animate with a sliding transition) in Nuxt UI. The documentation covers customizing the content, slots, and appearance of tabs, but does not provide information about adding sliding transitions to the tab panels themselves UTabs Usage UTabs Examples. If you need sliding transitions, you may need to implement custom transition logic using Vue's <Transition> component around your tab content, but this is not covered in the provided Nuxt UI documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

Omnislash•3mo ago

You can put anything you want since it either create or template, or even just tells you which one is slected and you can if-else yourself what you want to display

WiFi Plug•3mo ago

not sure if you can animate the content sliding easily I think it disappears/appears when you switch instantly. but if you figure out a way lmk i was interested in trying that out

Omnislash•3mo ago

you mean like this ? https://refactor.hotpott.pages.dev/styling#borders (I set it very fast though, but still there ^^") or you meant for sliders in general ? not sure if we talk about UTabs or something else ^^"

WiFi Plug•3mo ago

I meant kinda like where you have 2 tabs, when you click the other tab the contents of both tabs is visible sliding left and right so it pushes it

Omnislash•3mo ago

OOOOOOOOOOOOOOH liek this

WiFi Plug•3mo ago

but currently I believe it's not really possible since switching tabs instantly hides/shows only one tabs contents

Omnislash•3mo ago

well you can animate it but it's out-in indeed, you'll not see both at the same time afaik

WiFi Plug•3mo ago

but idk if it might be laggy depending on how much contents i have in the tab so I didn't bother trying too much to implement it

Omnislash•3mo ago

@kapa.ai using <Transition> can you overlap instead of waiting for the first to out before having the next coming in

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, you can overlap transitions (i.e., have the new content start entering before the old content has fully left) by changing the mode prop of the <Transition> component. By default, Vue's <Transition> uses the "simultaneous" mode, which allows both enter and leave transitions to run at the same time (overlap). If you set mode: 'out-in', the new element waits for the old one to leave before entering. If you want overlapping transitions, simply do not set the mode prop, or set it to in-out or leave it undefined. From the Nuxt documentation:

Both pageTransition and layoutTransition keys accept TransitionProps as JSON serializable values where you can pass the name, mode and other valid transition-props of the custom CSS transition.

Example from the docs (with mode: 'out-in' for sequential, remove or change for overlap):

export default defineNuxtConfig({
  app: {
    pageTransition: {
      name: 'fade',
      mode: 'out-in' // Remove this line or set to 'in-out' or undefined for overlap
    }
  }
})

export default defineNuxtConfig({
  app: {
    pageTransition: {
      name: 'fade',
      mode: 'out-in' // Remove this line or set to 'in-out' or undefined for overlap
    }
  }
})

Global Settings – Nuxt Transitions So, to achieve overlapping transitions, do not set the mode prop, or set it to 'in-out' or leave it undefined. This will allow the new content to enter while the old content is still leaving. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

Omnislash•3mo ago

sooo looks like it's possible and easy ? except if you except to pull it with your mouse or something

WiFi Plug•3mo ago

ah interesting, I might try it out. @kapa.ai i have a utabs component with custom contents, if i want to transition the contents to slide left/right as i switch tabs what's a minimal example of that

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm sorry, but the knowledge sources do not provide an explicit example or official guidance for adding sliding left/right transitions to the content of a UTabs component in Nuxt UI using <Transition>. The documentation covers how to customize tab content and use slots, but does not address animating tab panel transitions with sliding effects or integrating Vue's <Transition> with UTabs UTabs Examples. If you wish to implement this, you would need to wrap your tab content in a <Transition> component and manage the animation yourself, but this approach is not documented in the provided sources. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

Omnislash•3mo ago

if you even you <component> to choose from your contents, this code my help you : https://github.com/ribbityfrog/hotpot/blob/refactor/app/pages/styling.vue and the slide-fade transition is in the app.vue, but you have to change it if you want them to look like they push each others But I feel like kapa is weird and in-out will not animate them together so they'll actually fully overlap not sure the animations can overlap

Gaming

Programming

UTabs

Did you find this page helpful?