SPA application layout wrapper needed

[SGarno]

Feature request

Please create an application level layout component that gets applied to all layouts. This allows for a SPA type application to wrap each layout with a header/footer/sidebar etc without having to import components in the Layout.vue and then having conditional logic or rendering techniques for deciding which layout component to include.

What problem does this feature solve?

Not having this feature requires coding in Layout.vue to identify what layout components are to be used for a particular page. It also forces all components to be imported into the single Layout.vue instead of having VuePress manage the components and when they should be loaded.

What does the proposed API look like?

By using a specific component name, i.e. AppLayout.vue, SPALayout.vue or Global.vue this component could be loaded first and then the normal Layout.vue or AlternateLayout.vue (or whatever is specified in front matter of the MD file).

How should this be implemented in your opinion?

I am not sure of the internals of VuePress to know the proper approach, but how I handled this was the following:

In Layout.vue:

<template>
      <my-header />
      <my-navbar />

      <!-- Using the Layout frontmatter, we will load the appropriate page component -->
      <v-content>
        <component :is="layout" :content="content"></component>
      </v-content>

      <my-footer />
</template>

Then, in the script, I have:

<script>
import myHeader from "../components/my-header";
import myNavbar from "../components/my-navbar";
import myFooter from "../components/my-footer";

import Default from "./Default";
import Home from "./Home";
import AlternateLayout from "./AlternateLayout";
import Blog from "./Blog";
import Manpage from "./Manpage";

export default {
  components: {
    myHeader,
    myFooter,
    myNavbar,
    Default,
    Home,
    AlternateLayout,
    Blog,
    Manpage
  },
  computed: {
    config() {
      return this.$site.themeConfig;
    },
    layout() {
      return this.$page.frontmatter.layout || "Default";
    },
    content() {
      return this.$page.frontmatter;
    }
  }
</script>

This works, but it would be better if VuePress could parse through the files in the /theme folder and generate this rather than having to explicitly include these in the main Layout.vue component.

Are you willing to work on this yourself?**

Possibly....though not familiar with internal code.

[SGarno]

@bencodezen Tag! You're it!

[meteorlxy]

Related to #878

One possible solution is to make LayoutDistributor customizable, so users / theme authors can use their own LayoutDistributor.

cc @ulivz

[Laruxo]

I would like to see this as well. I just started playing with blog plugin where you have Category, Tag, Post, Layout and Page. For most users all these templates will have at least the same header and footer.

If you can agree on this change, I would love to help with it.