Skip to content

Toasts ​

The useToast composable gives you five toast types. Each returns an id you can use to dismiss it.

ts
import { useToast } from 'notifications-kit/vue'

const toast = useToast()

toast.success('Changes saved')
toast.error('Something went wrong')
toast.warning('Your session is about to expire')
toast.info('A new version is available')
toast.loading('Uploading…') // stays until you dismiss or update it

Options per toast ​

ts
toast.success('Saved!', {
  title: 'Success',
  duration: 6000,        // ms; 0 keeps it until dismissed
  position: 'bottom-center',
  dismissible: true,
})

Dismissing ​

ts
const id = toast.loading('Working…')

// later
toast.dismiss(id)   // remove one
toast.clear()       // remove all

Positions ​

top-left, top-center, top-right, bottom-left, bottom-center, bottom-right. Set a default globally in the plugin/module options, or per toast.

Released under the MIT License.