themeConfig

We provide a themeConfig file for users to customize the look and feel of the template. The themeConfig file is located in the root of the template folder with the name of themeConfig.ts.

Typing themeConfig

tl;dr

UserThemeConfig: user theme config object
ThemeConfig: UserThemeConfig with Ref
UserConfig: user layout config object for layout plugin. Aliases as UserLayoutConfig in @core.
Config: UserConfig with Ref. Its value has default config values.
As UserThemeConfig also have typings for UserConfig it should take them from UserConfig via UserConfig['<propertyName>']. (e.g. UserLayoutConfig['app']['title'])

We have a bit complex types for themeConfig file because we have @layouts plugin as a part of our template.

TIP

@layouts plugin is independent of the template and it can be used in any vue project. It just contains bare minimum styles and various layouts.

As @layouts should be independent and we will provide all the template related features via @core directory, Typing for themeConfig file is written in @core dir.

themeConfig can be defined via defineConfig function. This function accepts userConfig and returns { themeConfig, layoutConfig}.

config	type	desc
`userConfig`	`UserThemeConfig`	user theme config object
`themeConfig`	`ThemeConfig`	Same as `userConfig` but its some properties are reactive
`layoutConfig`	`UserConfig`	user layout config object for layout plugin

Please refer to below diagram from clear explanation:

master-config-typings.drawio

themeConfig ​

Typing themeConfig ​

tl;dr ​

themeConfig

Typing themeConfig

tl;dr