Create 404 Page - VueJS WordPress Theme

In this tutorial we're going to create the 404 page for the WordPress theme. The 404 page is a page some companies have some fun with here is a page for your inspiration of what you can create 404 Page Inspiration In this tutorial we're simply going to make sure we can display the page on the theme. To do this with VueJS it's very simple in the router file https://github.com/paulund/vuejs-wordpress-theme/blob/master/vue-wordpress-theme/src/router/index.js#L84 you'll need to add a new entry for the NotFoundPage, with the path being a * to catch everything.

    {
      name: 'NotFound',
      path: '*',
      component: NotFoundPage
    }

The Vue router will attempt to catch all path above it and if it can't catch any of them it will be caught by this NotFound entry. Therefore if we go to the URL /this/page/can/not/be/found it won't be found by the above routes and then land on this component. As for the 404 page we can put whatever we want on there, we could put the previous archives post component? Or we could put a search box on the page? Both will be a good solution to help your user find what they were searching for. Below is the code used for the NotFound page component.

<template>
    <div id="404-page">
        <h1 class="title is-1">Page not found</h1>
    </div>
</template>

<script>
export default{
}
</script>