AdminForthComponentDeclarationFull

Properties

file

file: string

Path to custom component which will be used to render field in the admin panel. e.g. @@/MyCustomComponent.vue

---

meta?

optional meta: object

Optional Meta object which will be passed to custom component as props. For example used by plugins to pass plugin options to custom components.

Example:

{
   name: 'Country Flag',
   virtual: true,
   showIn: {
     [AdminForthResourcePages.list]: false,
     [AdminForthResourcePages.edit]: false,
     [AdminForthResourcePages.create]: false,
     [AdminForthResourcePages.filter]: false,
   },
   components: {
     show: {
       file: '@@/Flag.vue',
       meta: {
         flagType: 'country',
       },
     },
   },
},
{
   name: 'Team Flag',
   virtual: true,
   showIn: {
     [AdminForthResourcePages.list]: false,
     [AdminForthResourcePages.edit]: false,
     [AdminForthResourcePages.create]: false,
     [AdminForthResourcePages.filter]: false,
   },
   components: {
     show: {
       file: '@@/Flag.vue',
       meta: {
         flagType: 'team',
       },
    },
   },
}

In Flag.vue you can access this meta object like this:

<template>
 <img :src="loadFile(`@@/flags/${meta.flagType}/${meta.flagType === 'country' ? record.countryIso : record.teamCode}.png`)" />
</template>

<script setup>
import { loadFile } from '@/utils';
defineProps(['meta', 'record']);
</script>

#### Index signature

 \[`key`: `string`\]: `any`

#### sidebarAndHeader?

> `optional` **sidebarAndHeader**: `"default"` \| `"none"` \| `"preferIconOnly"`

Controls sidebar and header visibility for custom pages
- 'default': Show both sidebar and header (default behavior)
- 'none': Hide both sidebar and header (full custom layout)
- 'preferIconOnly': Show header but prefer icon-only sidebar