.An opinionated tribute 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.Intro.Vue Sonner is an opinionated tribute component for Vue. It is actually personalized, however styled by nonpayment. Comes with a wipe to dismiss computer animation.Installment.To begin utilizing the collection, mount it in your job:.pnpm put up vue-sonner.or even.anecdote incorporate vue-sonner.Usage.For Vue 3.
Leave a tribute.
For Nuxt 3.Describe a nuxt plugin.// plugins/sonner. client.ts.bring in Toaster, salute from 'vue-sonner'.export nonpayment defineNuxtPlugin(( nuxtApp) => nuxtApp.vueApp.component(' Toaster', Toaster).return supply: salute. ).Usage Toaster oven element and $tribute function throughout the Vue SFC.
Provide a tribute.
Include the construct transpile for vue-sonner.// nuxt.config.ts.import defineNuxtConfig coming from 'nuxt/config'.export default defineNuxtConfig( ...create: transpile: [' vue-sonner'] ).CDN Hyperlink.EMS model.https://cdn.jsdelivr.net/npm/vue-sonner/+esm.UMD model.https://www.unpkg.com/vue-sonner@0.3.1/lib/vue-sonner.umd.cjs.Styles.Nonpayment.Many simple tribute. You may individualize it (as well as some other kind) by passing a possibilities item as the 2nd disagreement.salute(' Activity has actually been made').With personalized description:.tribute(' Celebration has actually been actually made', summary: 'Monday, January 3rd at 6:00 pm'. ).Success.Leaves a checkmark icon before the notification.toast.success(' Celebration has actually been developed').Error.Provides a mistake image before the message.toast.error(' Occasion has actually certainly not been produced').Activity.Presents a switch.toast(' Event has actually been produced', activity: label: 'Reverse',.onClick: () => console.log(' Undo'). ).Commitment.Begins in a loading state and will certainly improve automatically after the pledge deals with or neglects.You can easily pass a functionality to the success/error notifications to combine the result/error of the promise.toast.promise(() => brand-new Guarantee(( fix) => setTimeout( fix, 2000)), loading: 'Filling',.effectiveness: (records: any sort of) => 'Results',.error: (information: any) => 'Error'. ).Custom Component.You can pass a Vue Element as the very first argument instead of a cord to provide customized Part while preserving nonpayment designing. You may make use of the brainless variation below for a personalized, unstyled salute.Customization.Headless.You may utilize toast.custom to leave an unstyled toast with custom jsx while maintaining the performance.Style.You can modify the concept utilizing the style prop. Nonpayment style is actually light.Setting.You may transform the placement by means of the setting uphold on the element. Nonpayment is top-right.
Extended.Tributes can easily additionally be actually extended through default by means of the grow set. You can additionally change the amount of apparent tributes which is 3 by nonpayment.Styling for all tributes.You may type your salutes around the globe with the toastOptions set in the Toaster oven element.Designing for individual toast.tribute(' Occasion has actually been made', style: background: 'red'.,.className: 'my-toast',.descriptionClassName: 'my-toast-description'. ).Close button.Incorporate a near switch to all tributes that shows on hover by adding the closeButton set.Rich different colors.You may help make inaccuracy and also results state more vivid by incorporating the richColors set.Personalized countered.Offset coming from the sides of the monitor.Programmatically clear away toast.To take out a salute programmatically make use of toast.dismiss( id).const toastId = tribute(' Occasion has actually been actually produced').toast.dismiss( toastId).You may additionally use the dismiss strategy without the i.d. to put away all toasts.toast.dismiss().Programmatically take out toast.You may transform the period of each salute by using the length characteristic, or change the period of all tributes enjoy this:.toast(' Event has actually been generated', timeframe: 10000. ).// Persisent salute.salute(' Event has actually been produced', timeframe: Infinity. ).On Shut Callback.You can pass onDismiss and also onAutoClose callbacks. onDismiss obtains axed when either the shut switch gets hit or the tribute is actually swiped. onAutoClose fires when the tribute disappears instantly after it's timeout (duration prop).salute(' Occasion has actually been produced', onDismiss: (t) => console.log( 'Salute along with id $ t.id has actually been actually rejected '),.onAutoClose: (t) =>console.log( 'Tribute with i.d. $ t.id has been shut immediately '). ).Keyboard emphasis.You may pay attention to the toast area through pressing u2325/ alt + T. You can override it through providing a selection of event.code market values for each and every trick.Ideas.sonner - An opinionated salute component for React.