Skip to main content

AdminForthConfigCustomization

Extends​

  • Omit<AdminForthInputConfigCustomization, "loginPageInjections" | "globalInjections">

Properties​

announcementBadge()?​

optional announcementBadge: (user) => AnnouncementBadgeResponse

Function to return custom badge in side bar for users. Can return text or html If function is not passed or returns null, badge will not be shown. Execution is done on admin app load.

Parameters​

ParameterType
userAdminUser

Returns​

AnnouncementBadgeResponse

Inherited from​

Omit.announcementBadge

optional brandLogo: string

Path to your app logo

Example: Place file logo.svg to ./custom folder and set this option:

brandLogo: '@@/logo.svg',

Inherited from​

Omit.brandLogo

brandName​

brandName: string

Overrides​

Omit.brandName

brandNameSlug​

brandNameSlug: string

Slug which will be used on tech side e.g. to store cookies separately. Created automatically from brandName if not set.

customComponentsDir?​

optional customComponentsDir: string

Relative or absolute path to custom components directory By default equals ./custom.

Custom .vue files, images, and any other assets placed in this directory can be accessed in AdminForth components and configs with @@/.

For example if file path is ./custom/comp/my.vue, you can use it in AdminForth config like this:

components: {
 show: '@@/comp/my.vue',
}

Inherited from​

Omit.customComponentsDir

customPages​

customPages: AdminForthPageDeclaration[]

Overrides​

Omit.customPages

dateFormats​

dateFormats: string

datesFormat?​

optional datesFormat: string

DayJS format string for all dates in the app. Defaulted to 'MMM D, YYYY'

Inherited from​

Omit.datesFormat

emptyFieldPlaceholder?​

optional emptyFieldPlaceholder: string | object

Placeholder for empty fields in lists and show views, by default empty string ''

Inherited from​

Omit.emptyFieldPlaceholder

favicon?​

optional favicon: string

Path to your app favicon

Example: Place file favicon.png to ./custom folder and set this option:

favicon: '@@/favicon.png',

Inherited from​

Omit.favicon

globalInjections​

globalInjections: object

header: AdminForthComponentDeclarationFull[]

sidebar: AdminForthComponentDeclarationFull[]

userMenu​

userMenu: AdminForthComponentDeclarationFull[]

loginPageInjections​

loginPageInjections: object

underInputs​

underInputs: AdminForthComponentDeclarationFull[]

showBrandNameInSidebar​

showBrandNameInSidebar: boolean

Overrides​

Omit.showBrandNameInSidebar

styles?​

optional styles: Object

Object to redefine default styles for AdminForth components. Use this file as reference for all possible adjustments https://github.com/devforth/adminforth/blob/main/adminforth/modules/styles.ts

Inherited from​

Omit.styles

timeFormat​

timeFormat: string

Overrides​

Omit.timeFormat

title?​

optional title: string

HTML title tag value, defaults to brandName

Inherited from​

Omit.title

vueUsesFile?​

optional vueUsesFile: string

Path to custom .ts file which allows to inject custom Vue uses in SPA or add custom imports.

Example: Create file: ./custom/vue-uses.ts with next content:

import HighchartsVue from 'highcharts-vue';
// import '@@/custom.scss'; // here is how you can import custom styles

export default function (app) {
   app.use(HighchartsVue);
}

Install HighCharts into custom folder:

cd custom
npm init -y
npm install highcharts highcharts-vue

And specify vueUsesFile in AdminForth config:

vueUsesFile: '@@/vue-uses.ts',

Inherited from​

Omit.vueUsesFile