.An opinionated toast element for Vue. It is actually a Vue slot of Sonner.Examine.https://user-images.githubusercontent.com/6118824/228208185-be5aefd4-7fa8-4f95-a41c-88a60c0e2800.mp4.Introduction.Vue Sonner is an opinionated toast component for Vue. It is actually adjustable, but designated through default. Includes a swipe to reject animation.Setup.To begin making use of the library, install it in your task:.pnpm put in vue-sonner.or even.yarn include vue-sonner.Consumption.For Vue 3.
Make a tribute.
For Nuxt 3.Determine a nuxt plugin.// plugins/sonner. client.ts.import Toaster, toast coming from 'vue-sonner'.export nonpayment defineNuxtPlugin(( nuxtApp) => nuxtApp.vueApp.component(' Toaster', Toaster).return provide: tribute. ).Use Toaster oven component and $salute functionality anywhere in the Vue SFC.
Render a salute.
Incorporate the develop transpile for vue-sonner.// nuxt.config.ts.bring in defineNuxtConfig from 'nuxt/config'.export default defineNuxtConfig( ...build: transpile: [' vue-sonner'] ).CDN Web 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.Nonpayment.Most general tribute. You can personalize it (as well as some other style) by passing a choices things as the 2nd disagreement.tribute(' Event has actually been actually generated').With custom-made summary:.toast(' Occasion has actually been actually developed', summary: 'Monday, January 3rd at 6:00 pm'. ).Excellence.Makes a checkmark symbol before the information.toast.success(' Activity has actually been actually produced').Mistake.Leaves a mistake symbol in front of the information.toast.error(' Event has not been actually generated').Action.Renders a switch.tribute(' Event has been actually developed', action: tag: 'Undo',.onClick: () => console.log(' Undo'). ).Pledge.Begins in a loading condition as well as will certainly improve immediately after the pledge settles or even fails.You may pass a functionality to the success/error notifications to combine the result/error of the promise.toast.promise(() => new Promise(( willpower) => setTimeout( resolve, 2000)), packing: 'Loading',.effectiveness: (records: any type of) => 'Excellence',.inaccuracy: (information: any type of) => 'Error'. ).Custom-made Component.You may pass a Vue Part as the initial debate as opposed to a string to render custom Element while sustaining nonpayment styling. You may utilize the brainless variation listed below for a custom-made, unstyled toast.Modification.Headless.You may make use of toast.custom to render an unstyled toast along with custom-made jsx while sustaining the capability.Motif.You may alter the theme making use of the motif set. Nonpayment concept is lightweight.Placement.You can alter the placement through the setting uphold on the part. Default is top-right.
Increased.Salutes can easily likewise be actually extended through default with the grow prop. You can also transform the volume of visible salutes which is actually 3 through nonpayment.Styling for all tributes.You can design your tributes around the globe with the toastOptions uphold in the Toaster oven part.Designing for specific toast.toast(' Celebration has actually been actually produced', type: background: 'red'.,.className: 'my-toast',.descriptionClassName: 'my-toast-description'. ).Close button.Incorporate a close button to all tributes that reveals on hover through incorporating the closeButton set.Rich colours.You may make inaccuracy as well as success condition a lot more vivid by incorporating the richColors prop.Customized made up for.Offset coming from the sides of the display.Programmatically get rid of toast.To remove a tribute programmatically make use of toast.dismiss( id).const toastId = tribute(' Event has been actually created').toast.dismiss( toastId).You may likewise use the put away method without the i.d. to put away all tributes.toast.dismiss().Programmatically remove toast.You can easily alter the timeframe of each tribute by utilizing the period feature, or even modify the timeframe of all salutes enjoy this:.salute(' Activity has been generated', length: 10000. ).// Persisent tribute.tribute(' Celebration has actually been actually created', period: Immensity. ).On Close Callback.You can pass onDismiss and onAutoClose callbacks. onDismiss receives discharged when either the shut button gets hit or the toast is wiped. onAutoClose fires when the salute vanishes immediately after it is actually timeout (duration set).tribute(' Activity has been actually developed', onDismiss: (t) => console.log( 'Salute with i.d. $ t.id has actually been rejected '),.onAutoClose: (t) =>console.log( 'Toast with i.d. $ t.id has actually been shut instantly '). ).Computer keyboard emphasis.You can concentrate on the tribute aspect by pushing u2325/ alt + T. You can override it by supplying a range of event.code worths for every secret.Creativity.sonner - An opinionated tribute component for React.