Skip to main content

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​

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

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: AdminForthComponentDeclarationFull[]

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')

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