Default Theme Slots do not allow customization for the sidebar or page

[softwarewright]

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

Bug report

Steps to reproduce

Attempt to override the sidebar or page top/bottom in the theme for a project

• Create an index.js file in the theme directory

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

• Creatine the layout file in the theme directory

<template>
  <ParentLayout>
    <template #sidebar-top>
      <span> Hello World </span>
    </template>
  </ParentLayout>
</template>

<script>
import ParentLayout from '@parent-theme/layouts/Layout.vue'

export default {
  components: {
    ParentLayout
  }
}
</script>

What is expected?

The using the slots should update the content on the sidebar and the page.

What is actually happening?

Nothing is being rendered

Other relevant information

There needs to be templates wrapped around the slots on the Layout.vue in the vue default theme for the page and the sidebar sections.

[softwarewright]

I've started a PR here with the fixes, I would love feedback since this is my first PR against the project #1951

[sabicalija]

I've encountered the same issue when passing content to slots of parent-theme components.

Your changes in PR #1915 are working.
I've tried the following changes as well, which resolve the issues too:

Previously:

<template>
  <div
    class="theme-container"
    :class="pageClasses"
    @touchstart="onTouchStart"
    @touchend="onTouchEnd"
  >
    <Navbar v-if="shouldShowNavbar" @toggle-sidebar="toggleSidebar" />

    <div class="sidebar-mask" @click="toggleSidebar(false)"></div>

    <Sidebar :items="sidebarItems" @toggle-sidebar="toggleSidebar">
      <slot name="sidebar-top" #top />
      <slot name="sidebar-bottom" #bottom />
    </Sidebar>

    <Home v-if="$page.frontmatter.home" />

    <Page v-else :sidebar-items="sidebarItems">
      <slot name="page-top" #top />
      <slot name="page-bottom" #bottom />
    </Page>
  </div>
</template>

Now:

<template>
  <div
    class="theme-container"
    :class="pageClasses"
    @touchstart="onTouchStart"
    @touchend="onTouchEnd"
  >
    <Navbar v-if="shouldShowNavbar" @toggle-sidebar="toggleSidebar" />

    <div class="sidebar-mask" @click="toggleSidebar(false)"></div>

    <Sidebar :items="sidebarItems" @toggle-sidebar="toggleSidebar">
      <slot name="sidebar-top" slot="top" />
      <slot name="sidebar-bottom" slot="bottom" />
    </Sidebar>

    <Home v-if="$page.frontmatter.home" />

    <Page v-else :sidebar-items="sidebarItems">
      <slot name="page-top" slot="top" />
      <slot name="page-bottom" slot="bottom" />
    </Page>
  </div>
</template>

However, I've also tried the syntax shown in Access Parent Theme. There seems to be an issue too:

Like the example in vuepress docs (not working):

<template>
  <ParentLayout>
    <Foo #page-top />
    <template slot="page-bottom">
      <span>Test</span>
    </template>
  </ParentLayout>
</template>

Using templates (working):

<template>
  <ParentLayout>
    <template #page-top>
      <Foo />
    </template>
    <template slot="page-bottom">
      <span>Test</span>
    </template>
  </ParentLayout>
</template>

[softwarewright]

@sabicalija is there something else that I need to do to get those changes merged into master? I'm not sure what the workflow is for this project.

[sabicalija]

@softwarewright Sorry, but I don't know that, unfortunately. I guess @ulivz will reply as soon as possible.

In the meantime, we can customize the Layout.vue component on our own, and thanks to your #1950. BTW Thanks!