.An opinionated tribute element for Vue. It is actually a Vue port 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 swipe to reject animation.Installment.To start making use of the library, mount it in your task:.pnpm put up vue-sonner.or even.anecdote add vue-sonner.Consumption.For Vue 3.
Make a salute.
For Nuxt 3.Determine a nuxt plugin.// plugins/sonner. client.ts.bring in Toaster, salute from 'vue-sonner'.export default defineNuxtPlugin(( nuxtApp) => nuxtApp.vueApp.component(' Toaster', Toaster).return offer: salute. ).Use Toaster oven component and also $salute feature anywhere in the Vue SFC.
Make a toast.
Incorporate the build transpile for vue-sonner.// nuxt.config.ts.import defineNuxtConfig from 'nuxt/config'.export nonpayment defineNuxtConfig( ...build: transpile: [' vue-sonner'] ).CDN Hyperlink.EMS variation.https://cdn.jsdelivr.net/npm/vue-sonner/+esm.UMD model.https://www.unpkg.com/vue-sonner@0.3.1/lib/vue-sonner.umd.cjs.Kinds.Default.Most basic salute. You can individualize it (as well as some other type) by passing a possibilities object as the 2nd debate.toast(' Celebration has been actually made').With personalized summary:.salute(' Occasion has actually been produced', explanation: 'Monday, January 3rd at 6:00 pm'. ).Results.Makes a checkmark symbol before the notification.toast.success(' Activity has actually been actually generated').Inaccuracy.Renders a mistake icon in front of the message.toast.error(' Event has not been actually made').Action.Provides a button.tribute(' Occasion has actually been produced', action: label: 'Reverse',.onClick: () => console.log(' Undo'). ).Guarantee.Begins in a packing condition and also will upgrade instantly after the promise resolves or neglects.You can easily pass a feature to the success/error messages to incorporate the result/error of the commitment.toast.promise(() => new Commitment(( resolve) => setTimeout( willpower, 2000)), packing: 'Filling',.effectiveness: (data: any sort of) => 'Excellence',.inaccuracy: (information: any sort of) => 'Error'. ).Personalized Component.You may pass a Vue Element as the 1st disagreement instead of a string to leave custom-made Component while preserving default designing. You can use the headless model below for a customized, unstyled toast.Customization.Brainless.You can utilize toast.custom to provide an unstyled salute with custom-made jsx while preserving the performance.Theme.You may modify the concept utilizing the motif uphold. Default style is lightweight.Posture.You can easily modify the posture through the placement uphold on the component. Default is actually top-right.
Expanded.Toasts may likewise be broadened by nonpayment by means of the grow prop. You can additionally modify the amount of noticeable salutes which is actually 3 by default.Designing for all salutes.You may style your toasts globally along with the toastOptions set in the Toaster element.Styling for individual tribute.tribute(' Activity has actually been actually produced', type: history: 'reddish'.,.className: 'my-toast',.descriptionClassName: 'my-toast-description'. ).Near button.Include a near button to all toasts that presents on hover through including the closeButton uphold.Rich colours.You can easily help make inaccuracy and success state even more multicolored by incorporating the richColors set.Custom made up for.Made up for from the sides of the display screen.Programmatically eliminate toast.To remove a salute programmatically use toast.dismiss( i.d.).const toastId = toast(' Event has been actually developed').toast.dismiss( toastId).You may additionally utilize the dismiss technique without the id to dismiss all tributes.toast.dismiss().Programmatically take out toast.You can alter the length of each tribute by using the length property, or even change the timeframe of all tributes enjoy this:.tribute(' Event has been created', duration: 10000. ).// Persisent tribute.toast(' Celebration has actually been actually created', length: Infinity. ).On Close Callback.You may pass onDismiss as well as onAutoClose callbacks. onDismiss obtains discharged when either the close button obtains hit or the tribute is wiped. onAutoClose fires when the salute fades away automatically after it is actually timeout (length set).salute(' Activity has been actually made', onDismiss: (t) => console.log( 'Tribute along with i.d. $ t.id has been dismissed '),.onAutoClose: (t) =>console.log( 'Salute along with i.d. $ t.id has been actually shut instantly '). ).Key-board emphasis.You can focus on the salute area by pressing u2325/ alt + T. You may override it by delivering a selection of event.code worths for each secret.Ideas.sonner - An opinionated salute element for React.