Configuration of Nuxt.js layout

1. Create layoutsa folder (no need to create if there is one)

2. Created in the layouts folderDefaultLayout.vue

3. DefaultLayout.vueThe code is as follows:

<template>
  <div>
    <div class="header"> header </div>
    <Nuxt></Nuxt>
    <div class="header"> footer </div>
  </div>
</template>

<script>
export default {
    
    

}
</script>

<style>
.header {
    
    
  background-color: aquamarine;
}
.footer {
    
    
  background-color: blanchedalmond;
}
</style>

4. Use on page:

<template>
  <div>
    <div>main</div>
  </div>
</template>

<script>
export default {
    
    
  layout: 'DefaultLayout'
}
</script>

Screenshot below: