wishlist-app/src/App.vue

<template>
  <div class="h-screen max-w-[900px] mx-auto">
    <Header />
    <main class="h-full">
      <router-view v-slot="{ Component }">
        <template v-if="Component">
          <div
            v-if="error"
            class="flex flex-row space-x-2 items-center content-center justify-center m-20 text-red-500"
          >
            <IconError class="w-4 h-4" />
            <span>{{ t('errors.generic.text') }}</span>
          </div>
          <suspense v-else>
            <template #default>
              <component :is="Component"></component>
            </template>
            <template #fallback>
              <div
                class="flex flex-row space-x-2 items-center content-center justify-center m-20"
              >
                <IconSpinner class="w-4 h-4" />
                <span> {{ t('common.loading.text') }} </span>
              </div>
            </template>
          </suspense>
        </template>
      </router-view>
    </main>
    <modal-overlay />
  </div>
</template>
<script setup lang="ts">
import { onErrorCaptured, ref } from 'vue'
import Header from '@/components/Header.vue'
import { IconSpinner, IconError } from '@/components/icons'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()

const error = ref(null)

onErrorCaptured((e: any) => {
  error.value = e
  return false
})
</script>