Toast Messages Plugin in Laravel Livewire

We are going to use a plugin here to handle them all, specifically for each time we add, modify or delete an item from the cart, a message is displayed on the screen indicating to the user that said action was performed, so well the recommended one would be this one, you can use any other but I am going to expand on this one, simply write toast-me in Google and little else, so this will be more later when in the following classes we are going to listen to the events that happen on the server that we are going to establish in Livewire events and we show the messages as simple as that, so its installation is the typical one:

$ npm i toast-me

I'm going to come here since I have the process active, I'm going to download it, place this and wait there. Well, its configuration is simple as you can see and we import it and do an initial configuration here. There really wouldn't be a need for an initial configuration since we can use it anywhere, but what we're going to do is here in the app, which is where we're going to define the event listener here, and from here on is where we're going to use it, so here's where I would configure it:

resources/js/app.js

***
import toast from 'toast-me';
window.toast = toast

const options = {
   position:'bottom'
}

The:

window.toast = toast

It is configured if you want to use it anywhere else you could do it from the window object or rather you already have it configured in the window object and you could use it anywhere so I put all the same as all I put a constant here and this will be used to manage the position:

const options = {
  position:'bottom'
}

Otherwise, you can use it based on Livewire events, for example:

resources/js/app.js

Livewire.on('itemAdd', (params) => {
   toast('Item add to cart: ' + params[0].title, options)
})

From the components:

$this->dispatch("itemAdd",$post);

06-11-2024 - Andrés Cruz

En español

• Category
• /
• Laravel
• /
• Toast Messages Plugin in Laravel Livewire