Custom Loading Screen when the browser is still process rendering

<template>
  <NuxtLoadingIndicator />
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<NuxtLoadingIndicator :height="5" color="#00dc82" />

<script setup lang="ts">
const { isLoading, progress, start, finish } = useLoadingIndicator()

// You can manually control the loading state
start()
// ... do some work
finish()
</script>

<template>
  <div v-if="isLoading">Loading: {{ progress }}%</div>
</template>

<template>
  <div v-if="loading" class="fixed left-0 top-0 h-0.5 w-full z-50 bg-green-500" />
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<script setup lang="ts">
const nuxtApp = useNuxtApp();
const loading = ref(false);

nuxtApp.hook("page:start", () => {
  loading.value = true;
});
nuxtApp.hook("page:finish", () => {
  loading.value = false;
});
</script>

<script setup lang="ts">
const { start, finish, isLoading } = useLoadingIndicator()

// Manually start the loading indicator
start()

// Simulate some asynchronous operation
setTimeout(() => {
  // Finish the loading indicator
  finish()
}, 2000)
</script>

<template>
  <div v-if="isLoading">Loading...</div>
  <NuxtPage />
</template>

<script setup lang="ts">
const { pending, data: posts } = useLazyFetch('/api/posts')
</script>

<template>
  <div v-if="pending">Loading...</div>
  <div v-else>
    <!-- Display your posts here -->
  </div>
</template>