Opinionated Toast Component For Vue – Sonner

It’s a Vue port of Sonner, which enables developers to create customizable opinionated toast notifications in Vue applications.

How to use it:

1. Import the Sonner.

import { Toaster, toast } from 'vue-sonner'

2. Add the <Toaster /> component to the template.

<template>
  <Toaster />
  <button @click=" () => toast('A toast')">Toast</button>
</template>

3. Available component props.

invert: Boolean,
theme: {
  type: String as PropType<'light' | 'dark'>,
  required: false,
  default: 'light'
},
position: {
  type: String as PropType<Position>,
  required: false,
  default: 'bottom-right'
},
hotkey: {
  type: Array as PropType<string[]>,
  required: false,
  default: ['altKey', 'KeyT']
},
richColors: Boolean,
expand: Boolean,
duration: Number,
visibleToasts: {
  type: Number,
  required: false,
  default: () => 3
},
closeButton: Boolean,
toastOptions: {
  type: Object as PropType<ToastOptions>,
  required: false
},
offset: [String, Number]

4. API methods.

toast('Basic toast');

toast('Toast With Description', {
  description: 'With Description'
});

toast.success('Success Toast');

toast.error('Error Toast');

toast('With Toast Options', {
  id: number | string
  title?: string | Component
  type?: ToastTypes
  icon?: Component
  invert?: boolean
  description?: string
  duration?: number
  delete?: boolean
  important?: boolean
  action?: {
    label: string
    onClick: () => void
  }
  cancel?: {
    label: string
    onClick?: () => void
  }
  onDismiss?: (toast: ToastT) => void
  onAutoClose?: (toast: ToastT) => void
  promise?: PromiseT
  style?: Record<string, any>
  className?: string
  descriptionClassName?: string
});

toast.promise(() => new Promise((resolve) => setTimeout(resolve, 2000)), {
  loading: 'Loading',
  success: (data: any) => 'Success',
  error: (data: any) => 'Error'
});

toast.custom(shallowRef(HeadlessToast), { 
  duration: 999999
});

toast.dismiss();

Preview:

Changelog:

v0.3.2 (05/14/2023)

• feat(docs) use plugins provide insted of globalProperties
• feat: ability to add a cutom color icon

Download Details:

Author: xiaoluoboding

Live Demo: https://vue-sonner.vercel.app/

Download Link: https://github.com/xiaoluoboding/vue-sonner/archive/refs/heads/main.zip

Official Website: https://github.com/xiaoluoboding/vue-sonner

Install & Download:

# Yarn
$ yarn add vue-sonner

# NPM
$ npm i vue-sonner