Vue.js 2 Design Patterns and Best Practices

Error page

What if the user navigates to a route that doesn't exist or there's an error in our application? Well, we certainly could take advantage of Nuxt's default error page, or we could create our own.

We can do that by creating error.vue inside the layouts folder. Let's go ahead and do that and display an error message if the status code is 404; if not, we'll display a generic error message:

<template>  <div>    <div class="has-text-centered" v-if="error.statusCode === 404">      <img src="https://images.pexels.com/photos/127028/pexels-photo-      127028.jpeg" alt="">        <h1 class="title">Page not found: 404</h1>        <h2 class="subtitle">          <nuxt-link to="/">Back to the home page</nuxt-link>        </h2>    </div>    <div v-else class="has-text-centered"> <h1 class="title">An ...