EmptyState

Component for displaying a message when there is no data or content to show.

Description

EmptyState shows a light alert with an icon and a translated message, useful for empty states in lists, search results, tables with no data, or sections without content.

Location: @/components/interface/EmptyState.vue

Props

Prop	Type	Required	Default	Description
icon	String	❌ No	'fa-info-circle'	Font Awesome icon class (fa-solid)
message	String	❌ No	'general.empty'	Translation key for the message
classes	String	❌ No	''	Additional CSS classes for the container
class	String	❌ No	''	Additional CSS classes for the container

Usage

The component does not expose methods or slots. It is used as a presentational element that receives props and displays the translated message with t(message).

Usage Examples

Basic Example

<template>
  <div v-if="items.length === 0">
    <EmptyState />
  </div>
  <div v-else>
    <!-- item list -->
  </div>
</template>

<script setup>
import EmptyState from '@/components/interface/EmptyState.vue';

const items = ref([]);
</script>

Example with Custom Message

<template>
  <EmptyState
    message="search.noResults"
    icon="fa-search"
  />
</template>

<script setup>
import EmptyState from '@/components/interface/EmptyState.vue';
</script>

Example with Additional Classes

<template>
  <EmptyState
    message="refunds.emptyList"
    icon="fa-receipt"
    class="my-4"
    classes="rounded-3"
  />
</template>

Example in Table or Card

<template>
  <DataTable :loadData="loadData" :columns="columns">
    <template #empty-message>
      <EmptyState message="datatable.noData" icon="fa-inbox" />
    </template>
  </DataTable>
</template>

Important Notes

1. Translations: The message is shown via t(message). The default key is general.empty. Define the needed keys in i18n.

2. Icons: The icon uses the fa-solid class plus the icon prop. Use Font Awesome 6 icon names (e.g. fa-info-circle, fa-search, fa-inbox).

3. Styling: The container uses alert alert-light, is centered with flex and has no shadow (shadow-none). You can override with class or classes.

4. No slots: There are no slots; all visible content is the icon and message. For more complex content, use another component or wrap multiple elements.