Vue Toaster

Appearance

Type ​

The type determines how the toasts will appear.

TIP

By default, toasts will appear as info type.

Change type ​

To change the type, simply use the corresponding method:

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

const toaster = useToaster()

function trigger() {
  toaster.success('Should work!') 
}
</script>

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

const toaster = useToaster()

function trigger() {
  toaster.success('Should work!') 
}
</script>

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

Consult the Option Reference for available types.