---
title: "wait"
description: "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"
package: "maz-ui"
url: "https://maz-ui.com/plugins/wait"
---

# 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

- Package: `maz-ui`
- Import: `import { WaitPlugin } from 'maz-ui/plugins/wait'`
- Web: https://maz-ui.com/plugins/wait

**Tip:**

This plugin has a composable for easier use, after installing it you can use [useWait](../composables/use-wait.md)

## Installation

```ts [Vue]
import { WaitPlugin } from 'maz-ui/plugins/wait'
import { createApp } from 'vue'

const app = createApp(App)

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

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

## Basic usage

```vue
<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>
```