Vuepress: NavBar missing with Custom Layout

[ynnelson]

• [x] I confirm that this is an issue rather than a question.

Bug report

I created my own custom component and placed it in the appropriate folder. I then called said component in my markdown file frontmatter using the syntax below:

title: Marketing Dashboards
layout: DashboardGallery
---

The component displays just fine but the navbar is gone which is contrary to what is indicated in the documentation (https://v1.vuepress.vuejs.org/theme/default-theme-config.html#custom-layout-for-specific-pages)

Am I missing something?

Version

[email protected] is the version I am on

Steps to reproduce

What is expected?

I should be seeing the navbar

What is actually happening?

It's no visible with the custom layout

Other relevant information

• Your OS: MacOS Mojave 10.4
• Node.js version: npm: '6.4.1'
• Browser version: Chrome Version 72.0.3626.121 (Official Build) (64-bit)
• Is this a global or local install? global
• Which package manager did you use for the install? yarn
• Does this issue occur when all plugins are disabled? no idea

[ynnelson]

I think the problem lies on line 45-48 of the [routes.js](https://github.com/vuejs/vuepress/blob/e5d8ed4655b42e975a1d72286bc859257b3d2eb9/packages/%40vuepress/core/lib/node/internal-plugins/routes.js) file

let code = `
  {
    name: ${JSON.stringify(componentName)},
    path: ${JSON.stringify(pagePath)},
    component: GlobalLayout,
    beforeEnter: (to, from, next) => {
      ensureAsyncComponentsLoaded(${JSON.stringify(layout || 'Layout')}, ${JSON.stringify(componentName)}).then(next)
    },${_meta ? `\n    meta: ${JSON.stringify(_meta)}` : ''}
  }`

the default Layout from the Theme cannot be used in conjunction with the layout frontmatter variable as it was in version 0.x. In order to have the themes default navbar/sidebar I would have to either redefine it in my custom layout or write a globalLayout which in this case would duplicate the navbar of the default theme.
Perhaps we could add another variable in the frontmatter indicating if the globalLayout or theme layout is to be used or both??
Thoughts?

[Shigma]

1. If you are using the default theme, you should provide navbar in your custom layout.

For example:

https://github.com/vuejs/vuepress/blob/dc524128647a5f8f576bbf4bdbfcb4cc291fec4a/packages/%40vuepress/theme-default/layouts/Layout.vue#L8-L11

1. Or you can create your own theme and use navbar in your GlobalLayout so that every layout will have a navbar.

[Shigma]

And in conclusion, it is an expected behavior.

[FabioZanchi]

@Shigma Sorry to reply on a closed topic but my question is exactly the same. I'm using the default theme but I do not have the theme folder.

The documentation is a bit confusing when it says "while only keeping the navbar", because actually it's not showing the navbar:

By default the content of each *.md file is rendered in a<div class="page"> container, along with the sidebar, auto-generated edit links and prev/next links. If you wish to use a completely custom component in place of the page (while only keeping the navbar), you can again specify the component to use using YAML front matter.

So, after a simple install, could you please clarify how we can have the default-theme folders in the project?

Thanks

[FabioZanchi]

@Shigma Sorry to reply on a closed topic but my question is exactly the same. I'm using the default theme but I do not have the theme folder.

The documentation is a bit confusing when it says "while only keeping the navbar", because actually it's not showing the navbar:

By default the content of each *.md file is rendered in a<div class="page"> container, along with the sidebar, auto-generated edit links and prev/next links. If you wish to use a completely custom component in place of the page (while only keeping the navbar), you can again specify the component to use using YAML front matter.

So, after a simple install, could you please clarify how we can have the default-theme folders in the project?

Thanks

It's working creating the home.vue inside components folder and importing the component on readme.md file (home page) like this:

home: true
---

<home/>

I'm just not if it's the correct approach.

Cheers

[ynnelson]

@Shigma I think the previous approach made more sense in v.0x, now if I want a custom layout with the default theme I have to manually add the navbar and the sidebar so that it is consistent across the site. It made way more sense before to just have to pass a frontmatter variable that controlled having a navbar and sidebar...just my 2cents. The doc should also be updated to reflect the change that you stated if that's the new format.
Otherwise, really love vuepress so thanks for all the work.

[ynnelson]

@Shigma could you provide clarification between Layout.vue and GlobalLayout.vue, it seems a bit redundant to have both of these and not just have the Layout.vue acting in a Global fashion as it was in v0.x?
I am simply trying to understand the use cases in which you would need to have the two separated?
Would also love to hear other peoples opinions on the subject...

[kaceo]

I second better documentation and definitely more examples. At this moment I am still not entirely sure what is the layout: frontmatter actually doing, where that vue file should be placed, and how to chain it to the inherited components. Please explain differently for (1) someone writing a complete theme for export as an NPM and (2) someone wanting just to override a few special pages with local override templates, e.g. a carousel or a custom 404 page, and (3) someone who wants to write part of the site in vue single page format and how to define the frontmatter in vue instead of md. Browsing tutorials around the web is totally confusing particularly because of the 0.x to 1.x changes.