Vue Toaster

Appearance

Pause on hover ​

The toasts delay can be paused by hovering them.

TIP

By default, pauseOnHover option is enabled.

Enabling / disabling pauseOnHover ​

To enable / disable pauseOnHover, simply set the pauseOnHover option:

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

const toaster = useToaster()

function trigger() {
  toaster.info(
    'pauseOnHover disabled!',
    { pauseOnHover: false } 
  )
}
</script>

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

const toaster = useToaster()

function trigger() {
  toaster.info(
    'pauseOnHover disabled!',
    { pauseOnHover: false } 
  )
}
</script>

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

TIP

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