VuePress theme inheritance setup

Question

I am attempting to modify the VuePress default theme navbar using theme inheritance. After reading the 1.x documentation, I believe I am applying exactly what is recommended, but the website does not build properly.

I have added extend = '@vuepress/theme-default' to my config.toml file, and created a directory called .vuepress/theme/components/ to which I have added the file Navbar.vue.

When generating the site, my terminal gives me the following warning:

warning [vuepress] Cannot resolve Layout.vue file in undefined, fallback to default layout: ...

The website does work, but the the default theme is not used, and the page is all off.

Answer 1

How to extend the default theme in Vuepress

Step 1 : Create a folder named « theme » under ‘./vuepress'

In this folder create a file named « index.js » with the following lines :

module.exports = {
    extend: '@vuepress/theme-default'
}

By doing this you specified that you are extending the default theme.

Step 2 : Recreate the right folders hierarchy respecting the one under ‘@vuepress/theme-default’

For example, if you want to extend the theme of the sidebar, you will have to replicate its hierarchy as follows :

The default theme in the Vuepress module :

@vuepress
  |— theme-default
     |— components
        |— Sidebar.vue

The extension of the default theme in your own project :

./vuepress
    |— theme
       |— components
          |— Sidebar.vue

To learn more about the file-level conventions, check out the Vuepress documentation.

Step 3 : Add a layout, a component or a styling element

You can either create a new component or styling element from scratch or copy an existing one from Vuepress to modify it.

Place the file in the right folder, and conserve its original name if it’s an existing one.

Step 4 : Fix dependencies

If your file depends on other files that are in the Vuepress module, you will need to specify it using the '@parent-theme’ keyword.

For example :

import { endingSlashRE, outboundRE } from  ‘../util’

becomes

import { endingSlashRE, outboundRE } from '@parent-theme/util’

And

@require ‘../styles/wrapper.styl’

becomes

@require '~@parent-theme/styles/wrapper.styl’

You can consider that '@parent-theme' stands for ’node-module/@vuepress/theme-default’.

Step 5 : Change the theme as you’d like !