How to use CommandPalette with links?

[YvesThirion]

Description

Hello,

I would like to use CommandPalette similarly to ContentSearch as a non-dialog but I struggle getting a similare result from the prop groups. Specifically for results that should be page links.

The following works fine with ContentSearch but not with CommandPalette:

<script setup lang="ts">
// Provided by api
const parsedResult: globalThis.ComputedRef<{
    label: any;
    to: any;
    class: string;
    icon: string;
}[]>

// Local
const links = ref<{
    label: string;
    icon: string;
    to: string;
}[]>([...])

...

const groups = computed(() => [
  {
    key: 'results',
    label: 'Résultats de recherche',
    commands: parsedResult.value,
  },
  {
    key: 'links',
    label: 'Liens',
    commands: links.value,
  },
])
</script>

<template>
<!-- Ok -->
    <ClientOnly>
      <UContentSearch
        v-show="isSearchOpen"
        placeholder="Recherche..."
        :groups="groups"
        :exact="false"
        :exact-query="false"
        :exact-hash="false"
        :empty-state="{ icon: 'i-heroicons-magnifying-glass-20-solid', label: 'Entrez un terme de recherche', queryLabel: 'Aucun résultat sur ce terme. Essayez à nouveau.' }"
        :fuse="{ fuseOptions: { threshold: 1, shouldSort: false } }"
        @input="onInput"
      />
    </ClientOnly>

<!-- Not working -->
    <UCard>
      <UCommandPalette
        placeholder="Recherche..."
        :groups="groups"
        :exact="false"
        :exact-query="false"
        :exact-hash="false"
        :empty-state="{ icon: 'i-heroicons-magnifying-glass-20-solid', label: 'Aucun résutats.', queryLabel: 'Aucun résutats sur ce terme. Essayez à nouveau.' }"
        :fuse="{ fuseOptions: { threshold: 1, shouldSort: false } }"
        @input="onInput"
      />
    </UCard>
</template>

Thanks

[Benjamin Canac]

You can use the @update:model-value on the CommandPalette to achieve this. Here is an example from https://ui.nuxt.com/components/command-palette

<script setup lang="ts">
const users = [
  { id: 'benjamincanac', label: 'benjamincanac', href: 'https://github.com/benjamincanac', target: '_blank', avatar: { src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/benjamincanac', srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/benjamincanac 2x', loading: 'lazy' } },
  { id: 'Atinux', label: 'Atinux', href: 'https://github.com/Atinux', target: '_blank', avatar: { src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/Atinux', srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/Atinux 2x', loading: 'lazy' } },
  { id: 'smarroufin', label: 'smarroufin', href: 'https://github.com/smarroufin', target: '_blank', avatar: { src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/smarroufin', srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/smarroufin 2x', loading: 'lazy' } }
]

const groups = computed(() => [{
  key: 'users',
  commands: users
}])

function onSelect (option) {
  if (option.click) {
    option.click()
  } else if (option.to) {
    router.push(option.to)
  } else if (option.href) {
    window.open(option.href, '_blank')
  }
}
</script>

<template>
  <UCommandPalette :groups="groups" @update:model-value="onSelect" />
</template>

[YvesThirion]

This indeed works, thanks.