Improves Layout.vue for extending

[favoyang]

Feature request

Restructure Layout.vue to make it easier to extend

• Add an unnamed slot for main content.
• Home component change to use custom layout instead of the v-if-else hack.
• Add a named slot for footer.

What problem does this feature solve?

Current Layout.vue template is hard to override while keep the navbar.

What does the proposed API look like?

# Sidebar and above unchanged

    <!-- unnamed slot for main content -->
    <slot></slot>

    <!-- the page component shows if no custom layout -->
    <Page
      v-if="!$page.frontmatter.layout"
      :sidebar-items="sidebarItems"
    >
      <slot
        name="page-top"
        slot="top"
      />
      <slot
        name="page-bottom"
        slot="bottom"
      />
    </Page>

    <!-- named slot for footer -->
    <slot name="footer"></slot>

The home page, then can be an example of custom layout.

HomeLayout.vue placed at theme/layouts

<template>
  <ParentLayout>
     ... home page content
    <slot name="footer">
        ... custom footer
    </slots>
  </ParentLayout>
</template>

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

export default {
  components: { ParentLayout },
  computed: {
    ...
  }
}
</script>

<style lang="stylus">
# custom styles
</style>

To enable home layout, add layout to frontmatter.
docs/README.md

---
layout: HomeLayout
heroText: blar blar
---

How should this be implemented in your opinion?

as above.

Are you willing to work on this yourself?

The code is pretty much here. I can do it, however it's changing the base template, better a core developer can step in, or review it.

[ulivz]

I don't think that providing too many hard-code overriding hooks is a good solution, maybe the simplest way for you is to custom a <GlobalLayout /> component.

ref: https://v1.vuepress.vuejs.org/theme/option-api.html#globallayout

[favoyang]

Hi @ulivz,

Thanks for the feedbacks. It definitely solves the the generic footer feature. However, do you think adding at least the unnamed slot for overriding do provide some value? After all the v-if home way is a hard-code and not extended thing.

I'm raising the request, because I extend the default-theme, like the @vuepress/theme-vue does. Then try to add one more custom page like Home.vue does, but it's impossible to keep the navbar and make it elegant. Because the default theme Layout.vue is not designed for extending. That seems leave me to a not too good workaround:

I can create a new base layout (CustomLayout.vue), with NavBar, and perhaps copy paste other feature/convention I liked from the default theme Layout.vue (Sidebar, pageclasses., onTouchHook...).

So my point is that if we want the default theme to be extendable. It need provide some way to achieve what Home.vue does for other Layout/component, And an unnamed slot seems the easiest way to do.

Other option like adding a new frontmatter entry main - a component, which exclusive designed for default theme to override page content to make home/special-layout/page at same level. (I don't like it comparing with template overriding).

<docs/README.md (using home layout)>

# OLD
- layout: Home

# New
- main: Home

<docs/ExampleAnotherLayoutForDefaultTheme.md>

- main: SpecialLayout

[favoyang]

This more like a feature request, and closed due to missing further feedbacks.