toaster
Displays messages to your users in flexible toasts
TIP
This plugin has a composable for easier use, after installing it you can use useToast
Basic usage
vue
<template>
<ZvButton size="medium" @click="showInfo">
Show persistent info toast on top
</ZvButton>
<ZvButton size="medium" @click="showError">
Show error toast on bottom with 1s timeout
</ZvButton>
<ZvButton size="medium" @click="showWarning">
Show warning toast on top right
</ZvButton>
<ZvButton size="medium" @click="showSuccess">
Show persistent success toast on bottom left
</ZvButton>
</template>
<script lang="ts" setup>
import { useToast } from '@zadigetvoltaire/ui'
const toast = useToast()
function showInfo () {
toast.info('Info message', {
position: 'top',
})
}
function showError () {
toast.error('Error message', {
position: 'bottom',
timeout: 1000,
})
}
function showWarning () {
toast.warning('Warning message', {
position: 'top-right'
})
}
function showSuccess () {
toast.success('Success message', {
position: 'bottom-left',
persistent: true,
})
}
</script>Install
main.ts or main.js
ts
import { createApp } from 'vue'
import { installToaster, ToasterOptions } from '@zadigetvoltaire/ui'
const app = createApp(App)
// DEFAULT OPTIONS
const toasterOptions: ToasterOptions = {
position: 'bottom-right',
timeout: 10_000,
persistent: false,
}
app.use(installToaster, toasterOptions)
app.mount('#app')Options
Positions
ts
type ToasterPositions =
| 'top'
| 'top-right'
| 'top-left'
| 'bottom'
| 'bottom-right'
| 'bottom-left'Persistent
ts
const persistent: boolean = falseTimeout
ts
const timeout: number = 10000 // in ms