Page loader
A reusable loading overlay component that displays a progress spinner on a semi-transparent background. This component is designed to indicate loading states across your Nuxt 3 application.
1. Create a component base/loadingOverlay.vue with a styling that best suit project need.
<template>
<div
class="fixed left-0 top-0 h-full w-full z-50 flex justify-center items-center bg-[#000000a6]"
>
<ProgressSpinner />
</div>
</template>
2. Ensure PrimeVue's ProgressSpinner is properly imported in your Nuxt configuration primevue plugin
Usage Examples
<!-- pages/users.vue -->
<template>
<div>
<LoadingOverlay v-if="loading" />
<div class="users-content">
<!-- Your page content -->
</div>
</div>
</template>
<script setup>
const loading = ref(true);
onMounted(async () => {
try {
await fetchUsers();
} finally {
loading.value = false;
}
});
</script>