.An opinionated tribute component for Vue. It's a Vue slot of Sonner.Examine.https://user-images.githubusercontent.com/6118824/228208185-be5aefd4-7fa8-4f95-a41c-88a60c0e2800.mp4.Overview.Vue Sonner is actually an opinionated toast part for Vue. It's adjustable, yet styled through nonpayment. Possesses a wipe to reject animation.Setup.To start utilizing the library, install it in your project:.pnpm put in vue-sonner.or.anecdote incorporate vue-sonner.Consumption.For Vue 3.
Render a tribute.
For Nuxt 3.Specify a nuxt plugin.// plugins/sonner. client.ts.bring in Toaster, salute from 'vue-sonner'.export default defineNuxtPlugin(( nuxtApp) => nuxtApp.vueApp.component(' Toaster', Toaster Oven).profits give: toast. ).Use Toaster oven part and $toast functionality anywhere in the Vue SFC.
Render a salute.
Include the develop transpile for vue-sonner.// nuxt.config.ts.bring in defineNuxtConfig coming from 'nuxt/config'.export nonpayment defineNuxtConfig( ...construct: transpile: [' vue-sonner'] ).CDN Link.EMS version.https://cdn.jsdelivr.net/npm/vue-sonner/+esm.UMD model.https://www.unpkg.com/vue-sonner@0.3.1/lib/vue-sonner.umd.cjs.Types.Default.Most fundamental toast. You may personalize it (and any other kind) by passing an options object as the 2nd disagreement.toast(' Occasion has been actually created').With customized explanation:.tribute(' Celebration has been actually produced', summary: 'Monday, January third at 6:00 pm'. ).Success.Renders a checkmark icon in front of the information.toast.success(' Event has been made').Inaccuracy.Leaves an inaccuracy image facing the information.toast.error(' Activity has actually not been actually created').Action.Presents a switch.tribute(' Celebration has been created', action: tag: 'Reverse',.onClick: () => console.log(' Undo'). ).Assurance.Begins in a loading state and also will definitely upgrade instantly after the promise solves or even fails.You can easily pass a function to the success/error notifications to incorporate the result/error of the commitment.toast.promise(() => brand new Commitment(( resolve) => setTimeout( resolve, 2000)), loading: 'Loading',.success: (data: any type of) => 'Success',.error: (records: any kind of) => 'Inaccuracy'. ).Personalized Part.You may pass a Vue Part as the 1st disagreement instead of a strand to provide personalized Component while keeping default designing. You can easily make use of the brainless version listed below for a custom, unstyled toast.Customization.Headless.You can easily use toast.custom to make an unstyled tribute along with customized jsx while preserving the functionality.Motif.You can transform the style making use of the motif uphold. Default style is lightweight.Position.You may transform the setting via the position prop on the element. Default is actually top-right.
Grown.Salutes can easily likewise be expanded by default with the broaden uphold. You can likewise alter the amount of noticeable tributes which is 3 through default.Designing for all toasts.You can easily type your tributes globally along with the toastOptions set in the Toaster component.Styling for specific tribute.salute(' Activity has actually been actually developed', style: background: 'red'.,.className: 'my-toast',.descriptionClassName: 'my-toast-description'. ).Near switch.Incorporate a near switch to all toasts that presents on hover by incorporating the closeButton prop.Rich different colors.You can produce mistake and effectiveness state a lot more colorful by incorporating the richColors set.Personalized made up for.Offset from the sides of the monitor.Programmatically eliminate toast.To clear away a tribute programmatically utilize toast.dismiss( id).const toastId = tribute(' Occasion has been made').toast.dismiss( toastId).You may likewise make use of the dismiss strategy without the id to dismiss all tributes.toast.dismiss().Programmatically get rid of toast.You can easily alter the timeframe of each tribute by utilizing the duration home, or even transform the period of all salutes enjoy this:.tribute(' Activity has been actually produced', period: 10000. ).// Persisent toast.salute(' Activity has actually been actually developed', length: Infinity. ).On Shut Callback.You can pass onDismiss and also onAutoClose callbacks. onDismiss gets discharged when either the near button obtains clicked on or even the tribute is actually swiped. onAutoClose fires when the tribute goes away immediately after it is actually timeout (period prop).tribute(' Occasion has been actually made', onDismiss: (t) => console.log( 'Tribute with id $ t.id has been dismissed '),.onAutoClose: (t) =>console.log( 'Tribute along with id $ t.id has been actually closed immediately '). ).Keyboard emphasis.You can pay attention to the salute aspect by pushing u2325/ alt + T. You can bypass it through providing a range of event.code values for each and every secret.Inspiration.sonner - An opinionated toast part for React.