piratezon_new/app/app.vue

<template>
  <UApp>
    <AdminLoadingOverlay />
    <component :is="DynamicHeader" 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(() => {
    if (route.path.includes("/lincoln")) {
      return "/favicon-lincoln.ico";
    }
    return "/favicon-ford.ico";
  });

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

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

  // 파비콘 강제 업데이트 (브라우저 캐시 우회)
  watch(favicon, (newFavicon) => {
    const link = document.querySelector("link[rel='icon']");
    if (link) {
      link.href = newFavicon + "?v=" + Date.now();
    }
  });

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

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