title: How to redirect from /pages to layouts/error.vue?
body: <p>I have created a error.vue file within the layouts folder which should show the UI for a 400, 404, 410 and 500 error. But, it is not showing the ones I created, it is still showing the default NuxtServerError page.</p>
  
  <p>So, my question is how can I show my created UI within a page.</p>
  
  <p>Below is the code that I am using within the layouts/error.vue</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="error-container"&gt;
      &lt;div class="error-content" v-if="error.statusCode === 404"&gt;
        &lt;div&gt;
          &lt;h1&gt;Sorry, the page you were looking for doesn't exist.&lt;/h1&gt;
          &lt;p&gt;You can return to our &lt;nuxt-link to="/"&gt;home page&lt;/nuxt-link&gt; or &lt;a href="mailto:contact@web.co"&gt;contact&lt;/a&gt; us if you can't find what you are looking for.&lt;/p&gt;
        &lt;/div&gt;
        &lt;img src="~/assets/Images/404.png"&gt;
      &lt;/div&gt;
  
      &lt;div class="error-content" v-if="error.statusCode === 400"&gt;
        &lt;div&gt;
          &lt;h1&gt;Sorry, the page you are looking for doesn't exist anymore.&lt;/h1&gt;
          &lt;p&gt;You can return to our &lt;nuxt-link to="/"&gt;home page&lt;/nuxt-link&gt; or &lt;a href="mailto:contact@web.co"&gt;contact&lt;/a&gt; us if you can't find what you are looking for.&lt;/p&gt;
        &lt;/div&gt;
        &lt;img src="~/assets/Images/404.png"&gt;
      &lt;/div&gt;
  
      &lt;div class="error-content" v-if="error.statusCode === 410"&gt;
        &lt;div&gt;
          &lt;h1&gt;Sorry, the page you are looking for has been deleted.&lt;/h1&gt;
          &lt;p&gt;You can return to our &lt;nuxt-link to="/"&gt;home page&lt;/nuxt-link&gt; or &lt;a href="mailto:contact@web.co"&gt;contact&lt;/a&gt; us if you can't find what you are looking for.&lt;/p&gt;
        &lt;/div&gt;
        &lt;img src="~/assets/Images/404.png"&gt;
      &lt;/div&gt;
  
      &lt;div class="error-content" v-if="error.statusCode === 500"&gt;
        &lt;div&gt;
          &lt;h1&gt;Sorry, the page you were looking for doesn't exist.&lt;/h1&gt;
          &lt;p&gt;You can return to our &lt;nuxt-link to="/"&gt;home page&lt;/nuxt-link&gt; or &lt;a href="mailto:contact@web.co"&gt;contact&lt;/a&gt; us if you can't find what you are looking for.&lt;/p&gt;
        &lt;/div&gt;
        &lt;img src="~/assets/Images/404.png"&gt;
      &lt;/div&gt;
    &lt;/div&gt;  
  &lt;/template&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>&lt;script&gt;
  export default {
    head() {
      return {
        title: 'Lost?'
      }
    },
    props: ['error'],
    layout: 'error'
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>&lt;style scoped&gt;
  .error-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
  
  .error-content {
    width: 90%;
    max-width: 800px;
    margin: auto;
    display: grid;
    grid-template: auto / auto 200px;
    grid-column-gap: 10px;
    text-align: center;
  }
  
  .error-content &gt; div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .error-content &gt; div &gt; h1 {
    font-size: 30px;
    margin: 0;
  }
  
  .error-content &gt; img {
    width: 200px;
  }
  
  a {
    text-decoration: unset;
    color: var(--color-tpBlue);
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>Many thanks in advance!</p>