Appearance
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 objectThemeConfig
:UserThemeConfig
withRef
UserConfig
: user layout config object for layout plugin. Aliases asUserLayoutConfig
in@core
.Config
:UserConfig
withRef
. Its value has default config values.- As
UserThemeConfig
also have typings forUserConfig
it should take them fromUserConfig
viaUserConfig['<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: