.An opinionated toast part for Vue. It is actually a Vue slot of Sonner.Sneak peek.https://user-images.githubusercontent.com/6118824/228208185-be5aefd4-7fa8-4f95-a41c-88a60c0e2800.mp4.Overview.Vue Sonner is an opinionated toast part for Vue. It's personalized, however styled through default. Includes a wipe to disregard animation.Installment.To start making use of the collection, mount it in your task:.pnpm put up vue-sonner.or even.yarn add vue-sonner.Consumption.For Vue 3.
Make a salute.
For Nuxt 3.Determine a nuxt plugin.// plugins/sonner. client.ts.bring in Toaster oven, toast coming from 'vue-sonner'.export default defineNuxtPlugin(( nuxtApp) => nuxtApp.vueApp.component(' Toaster', Toaster Oven).profits offer: tribute. ).Use Toaster oven element as well as $tribute functionality throughout the Vue SFC.
Leave a tribute.
Include the develop transpile for vue-sonner.// nuxt.config.ts.import defineNuxtConfig from 'nuxt/config'.export nonpayment defineNuxtConfig( ...build: transpile: [' vue-sonner'] ).CDN Hyperlink.Ambulance model.https://cdn.jsdelivr.net/npm/vue-sonner/+esm.UMD variation.https://www.unpkg.com/vue-sonner@0.3.1/lib/vue-sonner.umd.cjs.Styles.Nonpayment.A lot of fundamental salute. You can customize it (as well as any other type) through passing a possibilities item as the 2nd disagreement.tribute(' Event has actually been actually created').Along with custom explanation:.toast(' Event has been actually created', explanation: 'Monday, January third at 6:00 pm'. ).Excellence.Provides a checkmark icon facing the message.toast.success(' Activity has actually been actually generated').Mistake.Renders an error symbol in front of the message.toast.error(' Event has certainly not been actually generated').Activity.Renders a button.salute(' Activity has been actually created', activity: tag: 'Undo',.onClick: () => console.log(' Undo'). ).Commitment.Begins in a loading state and also will definitely upgrade immediately after the assurance addresses or even stops working.You can pass a feature to the success/error notifications to integrate the result/error of the promise.toast.promise(() => brand new Assurance(( fix) => setTimeout( willpower, 2000)), loading: 'Packing',.excellence: (data: any sort of) => 'Success',.inaccuracy: (information: any type of) => 'Error'. ).Personalized Part.You can pass a Vue Part as the first argument as opposed to a cord to make custom-made Component while keeping nonpayment designing. You can easily use the brainless version listed below for a custom-made, unstyled toast.Modification.Brainless.You can utilize toast.custom to provide an unstyled salute with custom-made jsx while maintaining the performance.Motif.You may transform the motif using the motif set. Nonpayment theme is light.Position.You may alter the position via the setting prop on the element. Default is actually top-right.
Increased.Tributes may additionally be actually extended by default through the broaden prop. You can additionally change the quantity of obvious tributes which is actually 3 by nonpayment.Designing for all salutes.You may design your salutes around the world along with the toastOptions prop in the Toaster oven part.Designing for personal salute.salute(' Celebration has actually been actually developed', design: background: 'red'.,.className: 'my-toast',.descriptionClassName: 'my-toast-description'. ).Close switch.Include a close switch to all tributes that shows on hover by including the closeButton prop.Rich colors.You may make mistake and also excellence state much more vibrant by including the richColors set.Custom countered.Made up for from the edges of the display screen.Programmatically eliminate tribute.To remove a toast programmatically make use of toast.dismiss( i.d.).const toastId = salute(' Activity has been actually produced').toast.dismiss( toastId).You may also make use of the put away technique without the id to put away all toasts.toast.dismiss().Programmatically clear away tribute.You can change the length of each tribute by using the period attribute, or transform the length of all toasts such as this:.tribute(' Activity has been actually developed', length: 10000. ).// Persisent toast.tribute(' Celebration has been actually made', period: Infinity. ).On Close Callback.You can easily pass onDismiss as well as onAutoClose callbacks. onDismiss gets fired when either the near switch acquires hit or even the tribute is swiped. onAutoClose fires when the tribute goes away automatically after it's timeout (length uphold).toast(' Event has actually been created', onDismiss: (t) => console.log( 'Salute with i.d. $ t.id has actually been actually dismissed '),.onAutoClose: (t) =>console.log( 'Tribute with id $ t.id has actually been closed immediately '). ).Key-board focus.You can concentrate on the salute field by pressing u2325/ alt + T. You can bypass it by supplying an assortment of event.code worths for each and every key.Motivation.sonner - An opinionated toast component for React.