Vue Toaster

Appearance

Position ​

The position determines where the toasts will appear.

TIP

By default, toasts will appear at the bottom of the screen.

Change position ​

To change the position, simply set the position option:

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

const toaster = useToaster()

function trigger() {
  toaster.info(
    'Should work!',
    { position: 'top' } 
  )
}
</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(
    'Should work!',
    { position: 'top' } 
  )
}
</script>

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

Consult the Option Reference for available positions.

TIP

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