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?

score 2 · Accepted Answer · answered Jul 01 '20 at 16:59

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>

Looks like you can have a `404.md` file now without the `enhanceApp.js` part now. The question was asked when it was still 0.x — Narigo, Jul 01 '20 at 22:01
I received a warning on the command line about the name "404" not meeting HTML5 component name standards. So I think that's the reason "NotFound" is also supported. — Jeff R, Jul 06 '20 at 23:00

Change 404 page in vuepress

1 Answers1