# Theme Configuration
As with plugins, the theme configuration file themeEntry
should export a plain JavaScript object
(#1
). If the plugin needs to take options, it can be a function that exports a plain object(#2
). The function will be called with the siteConfig.themeConfig
as the first argument, along with ctx which provides some compile-time metadata.
// .vuepress/theme/index.js
// #1
module.exports = {
// ...
}
// .vuepress/theme/index.js
// #2
module.exports = (themeConfig, ctx) => {
return {
// ...
}
}
TIP
You should see the difference between
themeEntry
andthemeConfig
, the former is a configuration for the theme itself, provided by VuePress. The latter is the user’s configuration for the theme, implemented by the used theme, for example Default Theme Config.Along with the options listed in this section,
themeEntry
also supports all Option API and Lifecycle supported by plugins.
# plugins
- Type:
Array|Object
- Default: undefined
Also see:
WARNING
You probably don’t need to use following options tagged with Danger Zone unless you know what you are doing!
# devTemplate Danger Zone
- Type:
String
- Default: undefined
HTML template path used in dev
mode, default template see here (opens new window)
# ssrTemplate Danger Zone
- Type:
String
- Default: undefined
HTML template path used in build
mode, default template see here (opens new window)
Also see:
# extend Danger Zone
- Type:
String
- Default: undefined
// .vuepress/theme/index.js
module.exports = {
extend: '@vuepress/theme-default'
}
VuePress provides the ability to inherit one theme from another. VuePress will follow the concept of override
and automatically help you prioritize thematic attributes, for example styles and layout components.
Also see:
# globalLayout Danger Zone
- Type:
String
- Default: undefined
// .vuepress/theme/index.js
module.exports = {
globalLayout: '/path/to/your/global/vue/sfc'
}
Global layout component is a component responsible for the global layout strategy. The default global layout (opens new window) will help you render different layouts according to $frontmatter.layout, so in most cases you do not need to configure this option.
For example, when you want to set a global header and footer for your theme, you can do this:
<!-- .vuepress/theme/layouts/GlobalLayout.vue -->
<template>
<div id="global-layout">
<header><h1>Header</h1></header>
<component :is="layout"/>
<footer><h1>Footer</h1></footer>
</div>
</template>
<script>
export default {
computed: {
layout () {
if (this.$page.path) {
if (this.$frontmatter.layout) {
// You can also check whether layout exists first as the default global layout does.
return this.$frontmatter.layout
}
return 'Layout'
}
return 'NotFound'
}
}
}
</script>