VuePress

# 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

  1. You should see the difference between themeEntry and themeConfig, 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.

  2. 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>

← Default Theme Config →