[Vuejs]-Child Use Different Layout From the Parent

How To use Difrrent Layout From The Parent

First, create a new layout B inside layouts folder like:

layoutb.vue

<template>
  <div class="layoutb">
    <Nuxt />
  </div>
</template>

Next, we can use the layout key in your pages components (pagea.vue & pagea.vue) to define which layout to use:

pagea.vue

export default {
  layout: 'layoutb',
  ...
}

pageb.vue

export default {
  layout: 'layoutb',
  ...
}

Now you will see page a and page b using layout B instead of layout A.