1. Component Oluşturma:

   • components

     klasörünün altında

     shared

     isimli bir klasör oluşturulur 1.
   • Header ve footer her sayfada kullanılacağı için bu klasör altında

     HeaderNav.vue

     ve

     MainFooter.vue

     gibi bileşenler oluşturulur 1.
2. Component'leri Kullanma:

   • default.vue

     layout'unda, header ve footer bileşenlerini kullanmak için aşağıdaki kod örneği kullanılabilir 1:

<template>
  <header-nav></header-nav>
  <nuxt />
  <main-footer></main-footer>
</template>

<script>
  import HeaderNav from '@/components/shared/HeaderNav.vue'
  import MainFooter from '@/components/shared/MainFooter'
  export default {
    components: {
      HeaderNav,
      MainFooter
    }
  }
</script>
Kopyala

3. Import İşlemi:
   • Component'leri kullanmak için, ilgili bileşenin yolu, dosyanın import edilerek kullanıldığı yere eklenir 1.

• YouTube: "VueJS CLI: Basics | Level 3-13: header and footer component" videosu 2.
• Stack Overflow: Vue.js'de header ve footer bileşeni ekleme hakkında bir soru ve yanıtlar 4.