Why is the navigation bar not being retained after I made a custom layout?

[allenxz]

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

Bug report

Steps to reproduce

What is expected?

What is actually happening?

Other relevant information

• My VuePress version is lower and euqal than 1.0.0-alpha.47:

  • VuePress version:
  • OS:
  • Node.js version:
  • Browser version:
  • Is this a global or local install?
  • Which package manager did you use for the install?
  • Does this issue occur when all plugins are disabled?

• My VuePress version is higher than 1.0.0-alpha.47, the following is the output of npx vuepress info in my VuePress project:

[florimondmanca]

I also just experienced this. The docs on custom page layouts read:

If you wish to use a completely custom component in place of the page, you can again specify the component to use using YAML front matter:

So apparently the component given in layout now replaces the whole layout, not just the content of the page (as I believe it did in 0.x). Since the default layout is what renders the navbar, this explains why you don't see the navbar anymore when using a custom layout.

I was able to fix this by explicitly wrapping my page layout around <Layout>, and using the page-top and page-bottom slots:

<template>
  <Layout>
    <template slot="page-top">
      <!-- My page content here -->
    </template>
  </Layout>
</template>

<script>
import Layout from "@theme/layouts/Layout.vue";

export default {
  components: { Layout },
};
</script>

See also Layout.vue. 👍

Maybe this should be documented in the custom layouts docs section?

[allenxz]

Thank you for your reply. I solved my problem by import Navbar directly into my custom layout. But I quite agree with you, which should be made clear in the document. The inconsistency between the actual situation and the description of the document will bring a lot of trouble.

[kaceo]

Another strategy, for customizing pages that only need small css changes, is to use frontmatter to override the style of the Content part (set pageClass to a class style), and add that class style into .vuepress/styles/index.styl. This allows you to target only the markdown part of the page (what is transferred into the Content slot), without impact on the rest of the layout (navbar, sidebar).

[Karlbovski]

Since this still open I'll add my issue here.
With the following code I'm able to retain the global-components (Navbar and Footer) inside my BaseLayout.vue, while if the current document has its own layout specified in the frontmatter, it will be used, but global-components are gone. I've tried almost any workaround but the weird behavior persists.

I'm currently using Vuepress 1.x

<template>
  <Navbar />
  <component :is="layout" />
  <Footer />
</template>

<script>
import BaseLayout from "@theme/layouts/BaseLayout";
//require('../styles/main.scss');
require("prismjs/themes/prism-tomorrow.css");

export default {
  name: "Layout",
  components: {
    BaseLayout
  },
  computed: {
    layout() {
      if (this.$page.path) {
        return this.$frontmatter.layout || "BaseLayout";
      }
      return "NotFound";
    }
  }
};
</script>

Now, I understand how this could happen but still, I find it a weird behavior and the Doc is not helping at all in its current state. Any suggestion?