Nuxt.js - Как иметь отдельный макет?

Question

В макете по умолчанию у меня есть верхний и нижний колонтитулы для каждой страницы.Но в error pages мне нужна полная страница без верхнего и нижнего колонтитула.Поэтому я сделал другой макет, и я называю его в разделе export default.Но у него все еще есть верхний и нижний колонтитулы.

default.vue

<template>
  <div>
    <app-header></app-header>
    <nuxt />
    <app-footer></app-footer>
  </div>
</template>

<script>
import Header from '~/components/Header.vue'
import Footer from '~/components/Footer.vue'
export default {
    components: {
    'app-header': Header,
    'app-footer': Footer,
    }
}
</script>

error.vue

<template>
  <div class="container">
    <h1 v-if="error.statusCode === 404">Page not found</h1>
    <h1 v-else>An error occurred</h1>
    <nuxt-link to="/">Home page</nuxt-link>
  </div>
</template>

<script>
export default {
  props: ['error'],
  layout: 'fullpage' // you can set a custom layout for the error page
}
</script>

fullpage.vue

<template>
  <div>
    <nuxt />
  </div>
</template>

Где я ошибаюсь?

Answer 1

Вы можете сделать это

    1 - create a layouterror.vue file inside layouts folder (Put nothing inside just the basic code).

    <template>
      <div>
      </div>
    </template>
    <script>
      export default {}
    </script>
    <style>
    </style>

    2 - create a error.vue file inside layouts folder.
    3 - and pass your error file a layout like this =>

   export default {
    layout: 'layouterror' 
   }

Может быть, это поможет Спасибо!