.An opinionated toast part for Vue. It's a Vue slot of Sonner.Sneak peek.https://user-images.githubusercontent.com/6118824/228208185-be5aefd4-7fa8-4f95-a41c-88a60c0e2800.mp4.Introduction.Vue Sonner is an opinionated salute element for Vue. It is actually adjustable, however designated through default. Includes a wipe to reject animation.Setup.To start utilizing the collection, install it in your project:.pnpm install vue-sonner.or even.yarn add vue-sonner.Consumption.For Vue 3.
Make a salute.
For Nuxt 3.Describe a nuxt plugin.// plugins/sonner. client.ts.bring in Toaster oven, toast from 'vue-sonner'.export default defineNuxtPlugin(( nuxtApp) => nuxtApp.vueApp.component(' Toaster', Toaster).come back give: toast. ).Use Toaster part and $salute functionality throughout the Vue SFC.
Render a salute.
Add the create transpile for vue-sonner.// nuxt.config.ts.bring in defineNuxtConfig coming from 'nuxt/config'.export nonpayment defineNuxtConfig( ...construct: transpile: [' vue-sonner'] ).CDN Hyperlink.Ambulance version.https://cdn.jsdelivr.net/npm/vue-sonner/+esm.UMD version.https://www.unpkg.com/vue-sonner@0.3.1/lib/vue-sonner.umd.cjs.Types.Nonpayment.Many general toast. You may tailor it (and also some other style) through passing a possibilities object as the second disagreement.toast(' Celebration has been developed').Along with custom-made description:.salute(' Celebration has actually been actually produced', description: 'Monday, January third at 6:00 pm'. ).Success.Renders a checkmark symbol before the notification.toast.success(' Occasion has been actually produced').Inaccuracy.Provides an error icon in front of the information.toast.error(' Occasion has certainly not been actually created').Activity.Provides a switch.toast(' Occasion has been developed', activity: tag: 'Reverse',.onClick: () => console.log(' Undo'). ).Commitment.Starts in a filling state as well as will certainly update automatically after the commitment settles or even stops working.You may pass a feature to the success/error messages to incorporate the result/error of the commitment.toast.promise(() => brand-new Promise(( willpower) => setTimeout( resolve, 2000)), loading: 'Filling',.effectiveness: (information: any type of) => 'Results',.inaccuracy: (data: any sort of) => 'Error'. ).Personalized Component.You can pass a Vue Element as the initial argument instead of a string to leave custom-made Component while keeping default styling. You may use the headless model listed below for a personalized, unstyled tribute.Personalization.Headless.You can utilize toast.custom to render an unstyled tribute along with personalized jsx while maintaining the functions.Concept.You may alter the motif using the motif uphold. Default motif is light.Position.You can easily modify the position with the setting set on the part. Default is actually top-right.
Extended.Tributes can also be actually grown through default with the broaden uphold. You can easily likewise modify the volume of apparent toasts which is 3 by default.Designing for all toasts.You can easily style your toasts around the world with the toastOptions prop in the Toaster oven component.Styling for specific tribute.tribute(' Celebration has actually been actually created', style: history: 'reddish'.,.className: 'my-toast',.descriptionClassName: 'my-toast-description'. ).Near button.Incorporate a close button to all salutes that presents on hover by including the closeButton uphold.Rich different colors.You can create inaccuracy as well as success condition extra vivid by including the richColors set.Personalized made up for.Made up for from the edges of the monitor.Programmatically take out salute.To clear away a tribute programmatically utilize toast.dismiss( id).const toastId = tribute(' Activity has been actually produced').toast.dismiss( toastId).You may also utilize the put away strategy without the id to dismiss all toasts.toast.dismiss().Programmatically clear away toast.You can easily modify the duration of each toast by using the duration feature, or even transform the length of all tributes like this:.tribute(' Occasion has actually been actually developed', period: 10000. ).// Persisent tribute.tribute(' Activity has been actually created', timeframe: Infinity. ).On Shut Callback.You can pass onDismiss and also onAutoClose callbacks. onDismiss acquires terminated when either the near button obtains hit or the salute is swiped. onAutoClose fires when the tribute goes away instantly after it is actually timeout (timeframe prop).salute(' Event has actually been actually generated', onDismiss: (t) => console.log( 'Toast along with i.d. $ t.id has been actually dismissed '),.onAutoClose: (t) =>console.log( 'Tribute along with i.d. $ t.id has been actually shut automatically '). ).Computer keyboard emphasis.You may focus on the salute area through pushing u2325/ alt + T. You may override it through giving a variety of event.code worths for each and every trick.Motivation.sonner - An opinionated salute element for React.