mod-portal-v2/app/app.vue

<script setup>
import { onMounted } from 'vue'

useHead({
  link: [
    { rel: 'stylesheet', href: '/css/main.css' }
  ]
})

const { isInitialized, verifySession } = useAuth()

onMounted(async () => {
  if (!isInitialized.value) {
    await verifySession()
  }
})
</script>

<template>
  <UApp>
    <div v-if="!isInitialized" class="loading-container">
      <span class="spinner sm"></span>
    </div>

    <div v-else class="app-viewport" style="padding-top: 5rem;">
      <main class="app-content" style="min-height: calc(100vh - 12rem);">
        <NuxtPage />
      </main>

      <div class="footer-wrapper">
        <MainFooter />
      </div>
    </div>
  </UApp>
</template>

<style scoped>
.loading-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding-top: 5rem;
}

.app-viewport,
.app-viewport > * {
  width: 100% !important;
}

.app-viewport {
  display: block !important;
  min-height: 100vh;
  padding-top: 5rem;
}

.app-content {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  min-height: calc(100vh - 12rem);
}

.footer-wrapper {
  width: 100%;
  margin-top: 8rem;
}
</style>