How to include common components Header and Footer in SPA Vue.js

Question

I am creating a project spa in vuejs/ I have created common components Header and footer which I want to includes in main App.vue.

I am sharing my Code structure below:

2. I am sharing my file App.vue:

 <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>

3. In the page of the Vue.js doesn't appear anything any idea how to include header and footer together to display good in spa vuejs. Which is wrong in this way?

Answer 1

header and footer are native html elements, you should name your components with uncommon names, for example name them AppHeader and AppFooter and use them like:

<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>