mirror of
https://github.com/nuxt/ui.git
synced 2026-09-14 19:51:10 +08:00
Benjamin Canac
18 lines
605 B
Vue
18 lines
605 B
Vue
<script setup lang="ts">
|
|
const { data: users } = useLazyFetch('https://jsonplaceholder.typicode.com/users', {
|
|
key: 'command-palette-users',
|
|
transform: (data: { id: number, name: string, email: string }[]) => {
|
|
return data?.map(user => ({ id: user.id, label: user.name, suffix: user.email, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}`, loading: 'lazy' as const } })) || []
|
|
},
|
|
server: false
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<UCommandPalette
|
|
:groups="[{ id: 'users', items: users || [] }]"
|
|
:fuse="{ fuseOptions: { includeMatches: true } }"
|
|
class="flex-1 h-80"
|
|
/>
|
|
</template>
|