<script setup lang="ts">
const nuxtApp = useNuxtApp()

const loading = ref(false)
loading.value = true

nuxtApp.hook('page:finish', () => {
  loading.value = false
})
</script>

<template>
  <div>
    <div
      v-if="loading"
      class="fixed h-screen w-screen opacity-100 bg-black z-[999]"
    >
      Loading...
    </div>

    <div>
      <h1>
        {{ loading }}
      </h1>
    </div>

    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

<script setup lang="ts">
const nuxtApp = useNuxtApp()

const loading = ref(false)
loading.value = true

nuxtApp.hook('page:finish', () => {
  loading.value = false
})
</script>

<template>
  <div>
    <div
      v-if="loading"
      class="fixed h-screen w-screen opacity-100 bg-black z-[999]"
    >
      Loading...
    </div>

    <div>
      <h1>
        {{ loading }}
      </h1>
    </div>

    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>