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

Question

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.

I share 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. 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?

Answer 1

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

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