piratezon_new/app/app.vue

<template>
  <UApp>
    <AdminLoadingOverlay />
    <!-- 메인 페이지 헤더 -->
    <component :is="DynamicHeader" v-if="!isAdminPage && isIndexPage" />
    <!-- 서브 페이지 헤더 -->
    <component :is="DynamicSubHeader" v-if="!isAdminPage && !isIndexPage" />
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
    <component :is="DynamicFooter" v-if="!isAdminPage && isIndexPage" />
  </UApp>
</template>

<script setup>
  import { computed, defineAsyncComponent, watch } from "vue";
  import { useRoute } from "vue-router";
  import { useHead } from "#app";

  const route = useRoute();
  const config = useRuntimeConfig();

  // admin 페이지 체크
  const isAdminPage = computed(() => {
    return route.path.startsWith("/site-manager");
  });

  // index 페이지 체크 (홈)
  const isIndexPage = computed(() => {
    return route.path === "/";
  });

  // 파비콘 동적 설정
  const favicon = computed(() => {
    return "/favicon.ico";
  });

  // 타이틀 동적 설정
  const pageTitle = computed(() => {
    return "파이럿존";
  });

  useHead(() => ({
    title: pageTitle.value,
    link: [
      {
        rel: "icon",
        type: "image/x-icon",
        href: favicon.value,
      },
    ],
  }));

  // 동적 Header 컴포넌트
  const DynamicHeader = defineAsyncComponent(() => import(`~/components/header.vue`));

  // 동적 Header 컴포넌트
  const DynamicSubHeader = defineAsyncComponent(() => import(`~/components/subHeader.vue`));

  // 동적 Footer 컴포넌트
  const DynamicFooter = defineAsyncComponent(() => import(`~/components/footer.vue`));
</script>
<style setup>
  @import "tailwindcss";
  @import "@nuxt/ui";
</style>