Empty

Github (GitHub)

빈 상태를 표시하는 구성요소입니다.

Usage

표시할 내용이 없을 때 빈 구성 요소를 사용하여 자리 표시자 상태를 표시합니다.

No projects found

It looks like you haven't added any projects. Create one to get started.

Title 파일

title prop 을 사용하여 빈 상태의 제목을 설정합니다.

title

No projects found

<template>
  <UEmpty title="No projects found" />
</template>

설명

description prop을 사용하여 빈 상태에 대한 설명을 설정합니다.

description

No projects found

It looks like you haven't added any projects. Create one to get started.

<template>
  <UEmpty
    title="No projects found"
    description="It looks like you haven't added any projects. Create one to get started."
  />
</template>

Icon

icon prop 을 사용하여 빈 상태의 아이콘을 설정합니다.

icon

No projects found

It looks like you haven't added any projects. Create one to get started.

<template>
  <UEmpty
    icon="i-lucide-file"
    title="No projects found"
    description="It looks like you haven't added any projects. Create one to get started."
  />
</template>

Avatar 이미지

avatar prop을 사용하여 빈 상태의 아바타를 설정합니다.

avatar.src

No projects found

It looks like you haven't added any projects. Create one to get started.

<template>
  <UEmpty
    :avatar="{
      src: 'https://github.com/nuxt.png'
    }"
    title="No projects found"
    description="It looks like you haven't added any projects. Create one to get started."
  />
</template>

loading: badge{label="4.10+" class="align-text-top"} 로드 중

loading 소품을 사용하여 아이콘 대신 로드 아이콘을 표시합니다. 레이아웃은 동일하게 유지되므로 레이아웃을 이동하지 않고도 로드 상태와 빈 상태 사이를 전환할 수 있습니다.

Loading projects

Please wait while we fetch your projects.

<template>
  <UEmpty
    icon="i-lucide-file"
    loading
    title="Loading projects"
    description="Please wait while we fetch your projects."
  />
</template>

Loading 아이콘: badge{label="4.10+" class="align-text-top"}

loading-icon 소품을 사용하여 로드 아이콘을 사용자 정의합니다. 기본값은 i-lucide-loader-circle입니다.

loadingIcon

Loading projects

Please wait while we fetch your projects.

<template>
  <UEmpty
    icon="i-lucide-file"
    loading
    loading-icon="i-lucide-loader"
    title="Loading projects"
    description="Please wait while we fetch your projects."
  />
</template>

ui.icons.loading 키 아래의 app.config.ts에서 이 아이콘을 전역적으로 사용자 정의할 수 있습니다.

ui.icons.loading 키 아래의 vite.config.ts에서 이 아이콘을 전역적으로 사용자 정의할 수 있습니다.

Actions 작업

actions prop를 사용하여 일부 Button 액션을 빈 상태에 추가합니다.

No projects found

It looks like you haven't added any projects. Create one to get started.

<template>
  <UEmpty
    icon="i-lucide-file"
    title="No projects found"
    description="It looks like you haven't added any projects. Create one to get started."
    :actions="[
      {
        icon: 'i-lucide-plus',
        label: 'Create new'
      },
      {
        icon: 'i-lucide-refresh-cw',
        label: 'Refresh',
        color: 'neutral',
        variant: 'subtle'
      }
    ]"
  />
</template>

Variant

variant prop을 사용하여 빈 상태의 변형을 변경합니다.

variant

No notifications

You're all caught up. New notifications will appear here.

<template>
  <UEmpty
    variant="naked"
    icon="i-lucide-bell"
    title="No notifications"
    description="You're all caught up. New notifications will appear here."
    :actions="[
      {
        icon: 'i-lucide-refresh-cw',
        label: 'Refresh',
        color: 'neutral',
        variant: 'subtle'
      }
    ]"
  />
</template>

Size 크기

size prop을 사용하여 빈 상태의 크기를 변경합니다.

size

No notifications

You're all caught up. New notifications will appear here.

<template>
  <UEmpty
    size="xl"
    icon="i-lucide-bell"
    title="No notifications"
    description="You're all caught up. New notifications will appear here."
    :actions="[
      {
        icon: 'i-lucide-refresh-cw',
        label: 'Refresh',
        color: 'neutral',
        variant: 'subtle'
      }
    ]"
  />
</template>

examples 예제

With 슬롯 사용

사용 가능한 슬롯을 사용하여 보다 복잡한 빈 상태를 만듭니다.

No team members

Invite your team to collaborate on this project.

Daniel Roe

danielroe

Pooya Parsa

pi0

Sébastien Chopin

atinux

Benjamin Canac

benjamincanac

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

const members: UserProps[] = [
  {
    name: 'Daniel Roe',
    description: 'danielroe',
    to: 'https://github.com/danielroe',
    target: '_blank',
    avatar: {
      src: 'https://github.com/danielroe.png',
      alt: 'danielroe',
      loading: 'lazy' as const
    }
  },
  {
    name: 'Pooya Parsa',
    description: 'pi0',
    to: 'https://github.com/pi0',
    target: '_blank',
    avatar: {
      src: 'https://github.com/pi0.png',
      alt: 'pi0',
      loading: 'lazy' as const
    }
  },
  {
    name: 'Sébastien Chopin',
    description: 'atinux',
    to: 'https://github.com/atinux',
    target: '_blank',
    avatar: {
      src: 'https://github.com/atinux.png',
      alt: 'atinux',
      loading: 'lazy' as const
    }
  },
  {
    name: 'Benjamin Canac',
    description: 'benjamincanac',
    to: 'https://github.com/benjamincanac',
    target: '_blank',
    avatar: {
      src: 'https://github.com/benjamincanac.png',
      alt: 'benjamincanac',
      loading: 'lazy' as const
    }
  }
]
</script>

<template>
  <UEmpty
    title="No team members"
    description="Invite your team to collaborate on this project."
    variant="naked"
    :actions="[{
      label: 'Invite members',
      icon: 'i-lucide-user-plus',
      color: 'neutral'
    }]"
  >
    <template #leading>
      <UAvatarGroup size="xl">
        <UAvatar src="https://github.com/nuxt.png" alt="Nuxt" loading="lazy" />
        <UAvatar src="https://github.com/unjs.png" alt="Unjs" loading="lazy" />
      </UAvatarGroup>
    </template>

    <template #footer>
      <USeparator class="my-4" />

      <div class="grid grid-cols-2 gap-4">
        <UPageCard
          v-for="(member, index) in members"
          :key="index"
          :to="member.to"
          :ui="{ container: 'sm:p-4' }"
        >
          <UUser
            :avatar="member.avatar"
            :name="member.name"
            :description="member.description"
            :ui="{ name: 'truncate' }"
          />
        </UPageCard>
      </div>
    </template>
  </UEmpty>
</template>

API

Props (### Props)

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`icon`		`any` The icon displayed above the title.
`avatar`		`AvatarProps`
`loading`		`boolean` When `true`, the loading icon will be displayed.
`loadingIcon`	`appConfig.ui.icons.loading`	`any` The icon when the `loading` prop is `true`.
`title`		`string`
`description`		`string`
`actions`		`ButtonProps[]` Display a list of Button in the body.
`variant`	`'outline'`	`"outline" \| "solid" \| "soft" \| "subtle" \| "naked"`
`size`	`'md'`	`"md" \| "xs" \| "sm" \| "lg" \| "xl"`
`ui`		`{ root?: SlotClass; header?: SlotClass; avatar?: SlotClass; title?: SlotClass; description?: SlotClass; body?: SlotClass; actions?: SlotClass; footer?: SlotClass; }`

슬롯

Slot	Type
`header`	`{}`
`leading`	`{ ui: object; }`
`title`	`{}`
`description`	`{}`
`body`	`{}`
`actions`	`{}`
`footer`	`{}`

Theme 테마

app.config.ts

export default defineAppConfig({
  ui: {
    empty: {
      slots: {
        root: 'relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0',
        header: 'flex flex-col items-center gap-2 max-w-sm text-center',
        avatar: 'shrink-0 mb-2',
        title: 'text-highlighted text-pretty font-medium',
        description: 'text-balance text-center',
        body: 'flex flex-col items-center gap-4 max-w-sm',
        actions: 'flex flex-wrap justify-center gap-2 shrink-0',
        footer: 'flex flex-col items-center gap-2 max-w-sm'
      },
      variants: {
        size: {
          xs: {
            avatar: 'size-8 text-base',
            title: 'text-sm',
            description: 'text-xs'
          },
          sm: {
            avatar: 'size-9 text-lg',
            title: 'text-sm',
            description: 'text-xs'
          },
          md: {
            avatar: 'size-10 text-xl',
            title: 'text-base',
            description: 'text-sm'
          },
          lg: {
            avatar: 'size-11 text-[22px]',
            title: 'text-base',
            description: 'text-sm'
          },
          xl: {
            avatar: 'size-12 text-2xl',
            title: 'text-lg',
            description: 'text-base'
          }
        },
        variant: {
          solid: {
            root: 'bg-inverted',
            title: 'text-inverted',
            description: 'text-dimmed'
          },
          outline: {
            root: 'bg-default ring ring-default',
            description: 'text-muted'
          },
          soft: {
            root: 'bg-elevated/50',
            description: 'text-toned'
          },
          subtle: {
            root: 'bg-elevated/50 ring ring-default',
            description: 'text-toned'
          },
          naked: {
            description: 'text-muted'
          }
        },
        loading: {
          true: {
            avatar: '[&>[data-slot=icon]]:animate-spin'
          }
        }
      },
      defaultVariants: {
        variant: 'outline',
        size: 'md'
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        empty: {
          slots: {
            root: 'relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0',
            header: 'flex flex-col items-center gap-2 max-w-sm text-center',
            avatar: 'shrink-0 mb-2',
            title: 'text-highlighted text-pretty font-medium',
            description: 'text-balance text-center',
            body: 'flex flex-col items-center gap-4 max-w-sm',
            actions: 'flex flex-wrap justify-center gap-2 shrink-0',
            footer: 'flex flex-col items-center gap-2 max-w-sm'
          },
          variants: {
            size: {
              xs: {
                avatar: 'size-8 text-base',
                title: 'text-sm',
                description: 'text-xs'
              },
              sm: {
                avatar: 'size-9 text-lg',
                title: 'text-sm',
                description: 'text-xs'
              },
              md: {
                avatar: 'size-10 text-xl',
                title: 'text-base',
                description: 'text-sm'
              },
              lg: {
                avatar: 'size-11 text-[22px]',
                title: 'text-base',
                description: 'text-sm'
              },
              xl: {
                avatar: 'size-12 text-2xl',
                title: 'text-lg',
                description: 'text-base'
              }
            },
            variant: {
              solid: {
                root: 'bg-inverted',
                title: 'text-inverted',
                description: 'text-dimmed'
              },
              outline: {
                root: 'bg-default ring ring-default',
                description: 'text-muted'
              },
              soft: {
                root: 'bg-elevated/50',
                description: 'text-toned'
              },
              subtle: {
                root: 'bg-elevated/50 ring ring-default',
                description: 'text-toned'
              },
              naked: {
                description: 'text-muted'
              }
            },
            loading: {
              true: {
                avatar: '[&>[data-slot=icon]]:animate-spin'
              }
            }
          },
          defaultVariants: {
            variant: 'outline',
            size: 'md'
          }
        }
      }
    })
  ]
})

변경 로그

No recent changes

Carousel

A carousel with motion and swipe built using Embla.

Marquee

A component to create infinite scrolling content.