Vue Toaster

Appearance

Duration ​

The duration determines the delay (in milliseconds) before the toasts will hide.

TIP

By default, toasts will hide after 3000 milliseconds.

Change duration ​

To change the duration, simply set the duration option:

vue
<script setup>
import { useToaster } from '@bastien-j/vue-toaster'

const toaster = useToaster()

function trigger() {
  toaster.info(
    'Should work!',
    { duration: 1000 } 
  )
}
</script>

<template>
  <button @click="trigger()">Trigger toast for 1s</button>
</template>
<script setup>
import { useToaster } from '@bastien-j/vue-toaster'

const toaster = useToaster()

function trigger() {
  toaster.info(
    'Should work!',
    { duration: 1000 } 
  )
}
</script>

<template>
  <button @click="trigger()">Trigger toast for 1s</button>
</template>

TIP

This option can be set globally when using the createToaster method.

Progress bar ​

To hide the progress bar, set the hideProgress option:

vue
<script setup>
import { useToaster } from '@bastien-j/vue-toaster'

const toaster = useToaster()

function trigger() {
  toaster.info(
    'Without progress bar!',
    { hideProgress: true } 
  )
}
</script>

<template>
  <button @click="trigger()">Trigger toast without progress bar</button>
</template>
<script setup>
import { useToaster } from '@bastien-j/vue-toaster'

const toaster = useToaster()

function trigger() {
  toaster.info(
    'Without progress bar!',
    { hideProgress: true } 
  )
}
</script>

<template>
  <button @click="trigger()">Trigger toast without progress bar</button>
</template>

TIP

This option can be set globally when using the createToaster method.