Create 404 Page – VueJS WordPress Theme

in 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>

Upgrade to access all content on Paulund

Members unlock all tutorials and snippets

Access to all downloadable content

Access to code examples before others

Sign Up Now

Already a member? Login here

Subscribe To Newsletter

Get weekly updates to your email