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