AdminForthConfigCustomization

Extends

• Omit<AdminForthInputConfigCustomization, "loginPage" | "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

Returns

AnnouncementBadgeResponse

Inherited from

Omit.announcementBadge

brandLogo?

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

Your app name

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

customHeadItems?

optional customHeadItems?: object[]

Allows adding custom elements (e.g., <link>, <script>, <meta>) to the <head> of the HTML document. Each item must include a tag name and a set of attributes.

attributes

attributes: Record<string, string | boolean>

innerCode?

optional innerCode?: string

tagName

tagName: string

Overrides

Omit.customHeadItems

customPages

customPages: AdminForthPageDeclaration[]

Description of custom pages which will let register custom pages for custom routes in AdminForth.

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 | { list?: string; show?: string; }

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

everyPageBottom

everyPageBottom: AdminForthComponentDeclarationFull[]

header

header: AdminForthComponentDeclarationFull[]

sidebar

sidebar: AdminForthComponentDeclarationFull[]

sidebarTop

sidebarTop: AdminForthComponentDeclarationFull[]

userMenu

userMenu: AdminForthComponentDeclarationFull[]

iconOnlySidebar?

optional iconOnlySidebar?: object

Path to your app logo for icon only sidebar

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

enabled?

optional enabled?: boolean

expandedSidebarWidth?

optional expandedSidebarWidth?: string

Width of expanded sidebar (default: '16.5rem')

logo?

optional logo?: string

Inherited from

Omit.iconOnlySidebar

loginPage?

optional loginPage?: AdminForthComponentDeclarationFull

loginPageInjections

loginPageInjections: object

panelHeader

panelHeader: AdminForthComponentDeclarationFull[]

underInputs

underInputs: AdminForthComponentDeclarationFull[]

underLoginButton

underLoginButton: AdminForthComponentDeclarationFull[]

showBrandLogoInSidebar?

optional showBrandLogoInSidebar?: boolean

Whether to show brand logo in sidebar default is true

Inherited from

Omit.showBrandLogoInSidebar

showBrandNameInSidebar

showBrandNameInSidebar: boolean

Whether to show brand name in sidebar default is true

Overrides

Omit.showBrandNameInSidebar

singleTheme?

optional singleTheme?: "light" | "dark"

Whether to use single theme for the app

Inherited from

Omit.singleTheme

spaBuildDir?

optional spaBuildDir?: string

Relative or absolute path to directory where AdminForth prepares SPA sources, installs SPA dependencies and builds SPA. AdminForth creates spa_tmp folder inside of it. By default equals <os.tmpdir()>/adminforth/<brandNameSlug>.

Keep it writable at runtime as well: on start bundleNow() prepares sources here to compare them with build in spaServeDir. It may be empty at runtime: SPA dependencies are installed here only when build in spaServeDir is outdated.

Inherited from

Omit.spaBuildDir

spaServeDir?

optional spaServeDir?: string

Relative or absolute path to directory from which built SPA is served. By default equals dist folder inside of installed AdminForth package.

Use dedicated directory: its content is removed on every rebuild. AdminForth refuses to use non-empty directory which it did not create.

Inherited from

Omit.spaServeDir

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

DayJS format string for all datetimes in the app. Defaulted to 'HH:mm:ss'

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
pnpm init -y
pnpm install highcharts highcharts-vue

And specify vueUsesFile in AdminForth config:

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

Inherited from

Omit.vueUsesFile