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