<p>I am creating a project in vuejs spa/I have created common components header and footer which I want to include in the main App.vue. </p> <p>I share my code structure below:</p> <ol start="2"> <li>I am sharing my file App.vue: </li> </ol> <p> <pre class="brush:html;toolbar:false;"><template> <header></header> </template> <script> import Header from './components/Header.vue' // import Footer from 'components/Footer.vue' export default { name: 'App', components: { Header, // Footer } } </script></pre> </p> <ol start="3"> <li>No idea appears in pages in Vue.js how to include header and footer together to display well in spa vuejs. What's wrong with this approach? </li> </ol></p>

<template>
  <AppHeader />
  <!-- other content-->
  <AppFooter /> 
</template>
<script>
  import {AppHeader} from './components/AppHeader.vue'
  import {AppFooter} from './components/AppFooter.vue'
  export default {
   name:'App',
   components:{ AppHeader, AppFooter}
 
  }
</script>