Change 404 page in vuepress

Question

Is it possible to change / customize the 404 page of Vuepress without ejecting and having to change the whole theme?

I am currently using the enhanceApp.js, but I'm unsure how I can change the router options (the catchall route) as the Router is already created. The way I got it working right now is this:

router.beforeEach((to, from, next) => {
  if (to.matched.length > 0 && to.matched[0].path === "*") {
    next("/404.html");
  } else {
    next();
  }
});

However, this feels like a hack as I always redirect to a custom and existing page containing my 404. Is there a more official way to do this?

Answer 1

I have a site based on Vuepress 1.5.x, and I was able to simply create a page named NotFound.vue under theme/layouts. No enhanceApp.js changes needed.

Vuepress itself seems already aware of this reserved layout name, based on the code here.

I previously had that page named 404.vue, but I was getting a warning saying that pages should follow proper HTML 5 component naming standards. Simply renaming it to NotFound.vue did the trick.

Contents of my NotFound.vue file:

<template>
  <BaseLayout>
    <template #content>
      <v-container class="text-center">
        <div class="py-6" />
        <h1>Oops!</h1>
        <p>Nothing to see here.</p>
        <v-btn class="cyan--text text--darken-3"
          exact :to="'/'" text>Go home</v-btn>
      </v-container>
    </template>
  </BaseLayout>
</template>

<script>
export default {
  name: "NotFound"
};
</script>