Vuepress with a global footer

A footer is a must have. At least here in germany.

Why you might ask? Because you need to have a privacy and an imprint page for this kind of blog.
Or at least I think it is a very good idea to do so.

The privacy and imprint links have to be visible at all times. So a footer seems to be a good idea to me.

I am assuming you want to simply use the Vuepress Default Theme (opens new window)

The problem

The Vuepress Default Theme way

Vuepress (opens new window) (v1.8.2 right now) does not have a global footer, but a footer for the homepage only.

Add can add it to the frontmatter of your root markdown file

<!-- /docs/index.md -->
---
home: true
tagline:  A blog about coding, cooking and everything in between
footer: Made by Robert with ☕ 
---

The problem here is:
How to add it to your other pages? Can I add links in the footer (spoiler: nope, you can't).

So there must be a different path to take!

(Yes I am ignoring the fact, that people are adding those links to their normal navigation. I don't like such a non-content-related stuff being so prominent)

Modify the default Layout.vue

⚠️ The following changes to your Vuepress instance might break it immediately or any time in the future. Be warned!

The easiest way seems to create an overwrite Layout.vue and use the original Layout.vue of the theme. The original Layout.vue have some slots (opens new window) available. One named page-bottom where we can provide our footer.

People have found this workaround at the vuepress repo (opens new window). Following the directions.

Create 2 files

1. /docs/.vuepress/theme/index.js

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

2. /docs/.vuepress/theme/layouts/Layout.vue

<template>
  <ParentLayout>
    <template #page-bottom>
      <div>My custom footer</div>
    </template>
  </ParentLayout>
</template>

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

export default {
  name: 'Layout',

  components: {
    ParentLayout
  }
}
</script>

All good now?!

Yes. And no.
Now you can provide a footer for every page, but not your homepage. You remember? The special page with the special build-in footer support. Instead it uses a special component named Home.vue.

If you are fine with this and are not using the homepage anyway. Well then you can stop reading here and have good cup of coffee.

Modify the default GlobalLayout.vue

⚠️ The following changes to your vuepress instance might break it immediatly or any time in the future. Be warned!

This approach takes the ideas of the previous modification but goes a step further. By replacing the GlobalLayout.vue you have complete control on what is rendered.

So let's go.

Create 2 files

1. /docs/.vuepress/theme/index.js

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

2. /docs/.vuepress/theme/layouts/GlobalLayout.vue

<template>
  <div>
    <GlobalLayout></GlobalLayout>
    <div class="home"> <!-- set this class to allow our footer to look like the 'normal' homepage's footer -->
      <div class="footer">
        <NavLink :item="privacy"/>
        <NavLink :item="imprint"/>
      </div>
    </div>
  </div>
</template>

<script>
import GlobalLayout from '@vuepress/core/lib/client/components/GlobalLayout.vue'
import NavLink from '@parent-theme/components/NavLink.vue'

export default {
  components: {
    GlobalLayout,
    NavLink
  },
  computed: {
    privacy() {
      return { id: 'privacy', text: 'Privacy', link: '/privacy/', }
    },
    imprint() {
      return { id: 'imprint', text: 'Imprint', link: '/imprint/', }
    }
  },
}
</script>

With this aproach I tried use as much as possible of the original theme as possible. Because of this, there are two things I would like to point out:

• I had to recreate the class hierarchy .home .footer because I want to use the theme's style for the footer. I hope this is not going to break very soon.
• Using the NavLink is totally not required, but hopefully ensures the same style for links as within the navbar.

Closing thoughts

While I dipped a bit deeper in the code of Vuepress as I hoped I had to, I am quite happy with the GlobalLayout modification.

I hope this helps anyone looking for help on how to do a global modification to your Vuepress instance.
A footer might be not the most exciting thing to do.