Глобальный лоадер

Full-screen loading overlay для блокирующих async flows.

Установка

npx alixan-ui-nuxt add global-loader

Использование

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

Свойство	Тип	По умолчанию	Описание
show	(options?: { label?: string }) => void	-	Открывает full-screen loader.
hide	() => void	-	Закрывает loader.
label	string	''	Опциональный label под spinner.