Nuxt UI CommandPalette group label slot

🖼️ui🧰modules

Not sure if this is the right discord and channel to ask, but i have a question regarding Nuxt UI's CommandPalette component.
I would like to add a custom component into the label of a group. The label slot i want to customize is the 'Users' label in the image.

My code example of what I thought would work:

  <UCommandPalette :groups>
    <template #test-label>
      <button class="p-4 text-sm text-muted">
        Custom button for the 'test' group
      </button>
    </template>
  </UCommandPalette>

  <UCommandPalette :groups>
    <template #test-label>
      <button class="p-4 text-sm text-muted">
        Custom button for the 'test' group
      </button>
    </template>
  </UCommandPalette>

const groups = [
  {
    id: 'test',
    slot: 'test' as const,
    items: [
      {
        icon: 'i-lucide-user',
      },
      {
        icon: 'i-lucide-credit-card',
      },
    ],
  },

const groups = [
  {
    id: 'test',
    slot: 'test' as const,
    items: [
      {
        icon: 'i-lucide-user',
      },
      {
        icon: 'i-lucide-credit-card',
      },
    ],
  },

The customized group label slot doesn't show up/isn't rendered at all.
So I must be misunderstanding the Nuxt UI docs: https://ui.nuxt.com/docs/components/command-palette#with-custom-slot
The docs claim this is the slot name format I can use to customize the group label slot:
#{{ group.slot }}-label

What am I doing wrong/misunderstanding here?

nuxt-ui-commandpallete-custom-group-label-v0-5j1g1vammweg1.png

Nuxt UI CommandPalette group label slot

🖼️ui🧰modules

  <UCommandPalette :groups>
    <template #test-label>
      <button class="p-4 text-sm text-muted">
        Custom button for the 'test' group
      </button>
    </template>
  </UCommandPalette>

  <UCommandPalette :groups>
    <template #test-label>
      <button class="p-4 text-sm text-muted">
        Custom button for the 'test' group
      </button>
    </template>
  </UCommandPalette>

const groups = [
  {
    id: 'test',
    slot: 'test' as const,
    items: [
      {
        icon: 'i-lucide-user',
      },
      {
        icon: 'i-lucide-credit-card',
      },
    ],
  },

const groups = [
  {
    id: 'test',
    slot: 'test' as const,
    items: [
      {
        icon: 'i-lucide-user',
      },
      {
        icon: 'i-lucide-credit-card',
      },
    ],
  },

Nuxt UI CommandPalette group label slot

Nuxt UI CommandPalette group label slot

Continue the conversation

Nuxt

Continue the conversation

Nuxt

Similar Threads