Vue Toaster

Appearance

Close on click ​

The toasts can be closed by clicking them.

TIP

By default, closeOnClick option is enabled and hideCloseButton option is disabled.

Enabling / disabling closeOnClick ​

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

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

const toaster = useToaster()

function trigger() {
  toaster.info(
    'closeOnClick disabled!',
    { closeOnClick: 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(
    'closeOnClick disabled!',
    { closeOnClick: false } 
  )
}
</script>

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

TIP

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

Hiding the close button (hideCloseButton) ​

You can also hide the close button with the hideCloseButton option:

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

const toaster = useToaster()

function trigger() {
  toaster.info(
    'close button hidden!',
    {
      closeOnClick: false,
      hideCloseButton: true 
    }
  )
}
</script>

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

const toaster = useToaster()

function trigger() {
  toaster.info(
    'close button hidden!',
    {
      closeOnClick: false,
      hideCloseButton: true 
    }
  )
}
</script>

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

TIP

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