drop/server/layouts/default.vue

<template>
  <div
    v-if="!clientRequest"
    class="flex flex-col w-full min-h-screen bg-zinc-900"
  >
    <LazyUserHeader class="z-50" hydrate-on-idle />
    <div class="grow flex">
      <NuxtPage />
    </div>
    <LazyUserFooter class="z-50" hydrate-on-interaction />
  </div>
  <div v-else class="flex flex-col w-full min-h-screen bg-zinc-900">
    <NuxtPage />
    <LazyUserHeaderStoreNav />
  </div>
</template>

<script setup lang="ts">
const clientRequest = isClientRequest();
const i18nHead = useLocaleHead();

const { t } = useI18n();

useHead({
  htmlAttrs: {
    lang: i18nHead.value.htmlAttrs.lang,
    // @ts-expect-error head.value.htmlAttrs.dir is not typed as strictly as it should be
    dir: i18nHead.value.htmlAttrs.dir,
  },
  // // seo headers
  // link: [...i18nHead.value.link],
  // meta: [...i18nHead.value.meta],
  titleTemplate(title) {
    return title ? t("titleTemplate", [title]) : t("title");
  },
});
const { mLogoObjectId } = await $dropFetch("/api/v1");
const favicon = mLogoObjectId ? useObject(mLogoObjectId) : "/favicon.ico";
useFavicon(favicon, { rel: "icon" });
</script>