.An opinionated salute part for Vue. It is actually a Vue port of Sonner.Preview.https://user-images.githubusercontent.com/6118824/228208185-be5aefd4-7fa8-4f95-a41c-88a60c0e2800.mp4.Introduction.Vue Sonner is an opinionated toast part for Vue. It's customizable, but styled through default. Features a wipe to disregard computer animation.Setup.To begin utilizing the library, install it in your project:.pnpm mount vue-sonner.or even.anecdote add vue-sonner.Utilization.For Vue 3.
Make a salute.
For Nuxt 3.Determine a nuxt plugin.// plugins/sonner. client.ts.import Toaster, salute coming from 'vue-sonner'.export nonpayment defineNuxtPlugin(( nuxtApp) => nuxtApp.vueApp.component(' Toaster', Toaster).profits offer: salute. ).Make use of Toaster part and also $toast feature anywhere in the Vue SFC.
Provide a salute.
Incorporate the construct transpile for vue-sonner.// nuxt.config.ts.bring in defineNuxtConfig from 'nuxt/config'.export default defineNuxtConfig( ...construct: transpile: [' vue-sonner'] ).CDN Web link.Ambulance 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.Default.Most general toast. You can easily tailor it (as well as every other kind) by passing an options object as the second disagreement.toast(' Event has been actually made').Along with custom-made summary:.toast(' Event has been produced', explanation: 'Monday, January third at 6:00 pm'. ).Excellence.Leaves a checkmark icon in front of the information.toast.success(' Celebration has been actually developed').Mistake.Makes an inaccuracy image facing the information.toast.error(' Event has certainly not been produced').Activity.Presents a switch.tribute(' Event has actually been made', action: tag: 'Undo',.onClick: () => console.log(' Undo'). ).Commitment.Begins in a packing condition and will definitely upgrade immediately after the pledge fixes or stops working.You can pass a function to the success/error notifications to include the result/error of the guarantee.toast.promise(() => brand new Commitment(( fix) => setTimeout( resolve, 2000)), filling: 'Loading',.success: (data: any) => 'Excellence',.inaccuracy: (information: any) => 'Mistake'. ).Custom Element.You may pass a Vue Component as the first debate as opposed to a cord to render customized Part while keeping nonpayment designing. You can use the headless version below for a personalized, unstyled salute.Customization.Brainless.You may make use of toast.custom to render an unstyled toast with custom-made jsx while maintaining the capability.Motif.You can transform the motif making use of the concept set. Default style is lightweight.Setting.You can change the posture with the setting set on the element. Nonpayment is top-right.
Expanded.Tributes can easily likewise be actually extended by nonpayment with the extend uphold. You may likewise change the amount of apparent salutes which is 3 by nonpayment.Styling for all salutes.You can design your salutes globally with the toastOptions set in the Toaster element.Designing for specific toast.tribute(' Event has actually been actually generated', type: history: 'red'.,.className: 'my-toast',.descriptionClassName: 'my-toast-description'. ).Close switch.Add a near button to all salutes that presents on hover through including the closeButton set.Rich colors.You can produce inaccuracy as well as excellence condition extra vibrant by adding the richColors uphold.Custom-made offset.Made up for from the edges of the monitor.Programmatically clear away salute.To get rid of a toast programmatically use toast.dismiss( id).const toastId = tribute(' Activity has actually been generated').toast.dismiss( toastId).You can also make use of the put away procedure without the id to dismiss all toasts.toast.dismiss().Programmatically take out salute.You can transform the length of each toast by using the timeframe quality, or even modify the timeframe of all tributes similar to this:.tribute(' Occasion has actually been actually developed', timeframe: 10000. ).// Persisent toast.tribute(' Activity has been developed', timeframe: Immensity. ).On Close Callback.You can pass onDismiss and also onAutoClose callbacks. onDismiss acquires terminated when either the near button receives clicked on or the salute is actually wiped. onAutoClose fires when the salute vanishes instantly after it is actually timeout (period uphold).salute(' Event has been developed', 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 finalized instantly '). ).Computer keyboard concentration.You may pay attention to the toast area by pressing u2325/ alt + T. You can easily override it by offering a selection of event.code worths for each secret.Ideas.sonner - An opinionated salute part for React.