Global Loader

A full-screen loading overlay for blocking async flows.

Installation

npx alixan-ui-nuxt add global-loader

Usage

app.vue

<template>
  <NuxtPage />
  <GlobalLoaderHost /> <!-- Add GlobalLoaderHost once near the root of your app. -->
</template>

Example.vue

<script setup lang="ts">
const loader = useGlobalLoader()

const load = () => {
  loader.show()

  window.setTimeout(() => {
    loader.hide()
  }, 3000)
}
</script>

<template>
  <Button @click="load">Show loader</Button>
</template>

API Reference

Prop	Type	Default	Description
show	(options?: { label?: string }) => void	-	Opens the full-screen loader.
hide	() => void	-	Closes the loader.
label	string	''	Optional label displayed below the spinner.