wait

A comprehensive loading state management plugin for Vue.js that provides easy-to-use utilities for handling async operations, loading indicators, and user feedback during data processing or any other async operation

TIP

This plugin has a composable for easier use, after installing it you can use useWait

Installation

Vue

import { WaitPlugin } from 'maz-ui/plugins/wait'
import { createApp } from 'vue'

const app = createApp(App)

app.use(WaitPlugin)
app.mount('#app')

Nuxt

export default defineNuxtConfig({
  modules: ['@maz-ui/nuxt'],
  mazUi: {
    composables: {
      useWait: true,
    },
  },
})

Basic usage

<script lang="ts" setup>
import { useWait } from 'maz-ui/composables'
import { ref } from 'vue'

const wait = useWait()

const submitted = ref(false)

function sleep(ms: number) {
  return new Promise(resolve => setTimeout(resolve, ms))
}

async function submitData() {
  submitted.value = false
  wait.start('DATA_SUBMITTING')

  await sleep(2000)

  submitted.value = true
  wait.stop('DATA_SUBMITTING')
}
</script>

<template>
  <MazBtn :loading="wait.isLoading('DATA_SUBMITTING')" @click="submitData">
    Submit Data
  </MazBtn>

  <div v-if="submitted">
    Data Submitted
  </div>
</template>