schon/storefront/app.vue

<template>
  <div class="main">
    <nuxt-loading-indicator color="#7965d1" />
    <base-header />
    <ui-breadcrumbs v-if="showBreadcrumbs" />
    <transition name="opacity" mode="out-in">
      <base-auth v-if="activeState">
        <forms-login v-if="appStore.isLogin" />
        <forms-register v-if="appStore.isRegister" />
        <forms-reset-password v-if="appStore.isForgot" />
        <forms-new-password v-if="appStore.isReset" />
      </base-auth>
    </transition>
    <nuxt-page />
    <base-footer />
  </div>
</template>

<script lang="ts" setup>
import {useAppConfig} from "~/composables/config";
import { DEFAULT_LOCALE } from '~/config/constants';
import {useRefresh} from "~/composables/auth";
import {useLanguages, useLocaleRedirect} from "~/composables/languages";
import {useCompanyInfo} from "~/composables/company";
import {useCategories} from "~/composables/categories";

const { locale } = useI18n();
const route = useRoute();
const router = useRouter();
const appStore = useAppStore();
const switchLocalePath = useSwitchLocalePath();

const showBreadcrumbs = computed(() => {
  const name = typeof route.name === 'string' ? route.name : '';
  return ![
      'index',
      'brand',
      'search',
      'profile',
      'activate-user',
      'reset-password'
  ].some(prefix => name.startsWith(prefix));
});

const activeState = computed(() => appStore.activeState);
const { COOKIES_LOCALE_KEY } = useAppConfig();

const cookieLocale = useCookie(
    COOKIES_LOCALE_KEY,
    {
      default: () => DEFAULT_LOCALE,
      path: '/'
    }
);

const { refresh } = useRefresh();
const { getCategories } = await useCategories();
const { isSupportedLocale } = useLocaleRedirect();

let refreshInterval: NodeJS.Timeout;

if (import.meta.server) {
  await Promise.all([
    refresh(),
    useLanguages(),
    useCompanyInfo(),
    getCategories()
  ]);
}

watch(
  () => appStore.activeState,
  (state) => {
    appStore.setOverflowHidden(state !== '');
  },
  { immediate: true }
);

watch(locale, () => {
  useHead({
    htmlAttrs: {
      lang: locale.value
    }
  });
});

let stopWatcher: VoidFunction = () => {};

if (!cookieLocale.value) {
  cookieLocale.value = DEFAULT_LOCALE;
  await router.push({path: switchLocalePath(cookieLocale.value)});
}

if (locale.value !== cookieLocale.value) {
  if (isSupportedLocale(cookieLocale.value)) {
    await router.push({
      path: switchLocalePath(cookieLocale.value),
      query: route.query
    });
  } else {
    cookieLocale.value = DEFAULT_LOCALE

    await router.push({
      path: switchLocalePath(DEFAULT_LOCALE),
      query: route.query
    });
  }
}

onMounted( async () => {
  refreshInterval = setInterval(async () => {
    await refresh();
  }, 600000);

  stopWatcher = watch(
    () => appStore.isOverflowHidden,
    (hidden) => {
      const root = document.documentElement;
      const body = document.body;
      if (hidden) {
        root.classList.add('lock-scroll');
        body.classList.add('lock-scroll');
      } else {
        root.classList.remove('lock-scroll');
        body.classList.remove('lock-scroll');
      }
    },
    { immediate: true }
  );

  useHead({
    htmlAttrs: {
      lang: locale.value
    }
  });
});

onBeforeUnmount(() => {
  stopWatcher()
  document.documentElement.classList.remove('lock-scroll');
  document.body.classList.remove('lock-scroll');
});
</script>

<style lang="scss">
.main {
  padding-top: 90px;
  background-color: $light;
}

.lock-scroll {
  overflow: hidden !important;
}
</style>