How to Show Notification using Sweet Alert in Laravel 10

Prerequisites:

Before we dive into the implementation, make sure you have the following prerequisites:

Laravel 10 installed and configured on your system.
Basic understanding of Laravel’s routing, views, and controllers.
Familiarity with PHP and JavaScript.

Step 1: Installing Sweet Alert

To get started, open your Laravel project in the terminal and install Sweet Alert using the following command:

npm install sweetalert2

This command will install the Sweet Alert package along with its dependencies. Once the installation is complete, you can import Sweet Alert into your project.

Step 2: Importing Sweet Alert

Open the resources/js/app.js file and add the following import statement at the top:

import Swal from 'sweetalert2/dist/sweetalert2.js';

Save the file and proceed to the next step.

Step 3: Creating a Notification

In Laravel, notifications are typically triggered from controllers. Let’s create a basic example to demonstrate how to show a Sweet Alert notification when a specific action is performed.

Open a controller file of your choice (e.g., app/Http/Controllers/ExampleController.php) and add the following code to the desired method:

public function exampleMethod()
{
    // Perform some logic
    
    // Show a success notification
    return response()->json(['message' => 'Action successful!']);
}

Step 4: Displaying the Notification

Now that we have set up the notification in our controller, we can use Sweet Alert to display it in the browser.

Open the corresponding JavaScript file (resources/js/app.js) and add the following code:

// Inside the relevant function or event handler
Swal.fire({
    title: 'Success',
    text: response.data.message, // Assuming the response contains the notification message
    icon: 'success',
    timer: 3000, // Duration to display the notification (in milliseconds)
});

Make sure to replace response.data.message with the actual variable or value that holds the notification message. Additionally, feel free to customize the appearance and behavior of the Sweet Alert notification according to your preferences.

Step 5: Testing the Notification

To see the Sweet Alert notification in action, navigate to the view file associated with your controller method (e.g., resources/views/example.blade.php). Add a button or trigger that will initiate the action.

<button id="notificationButton">Trigger Notification</button>

<script>
    document.getElementById('notificationButton').addEventListener('click', function () {
        // Make an AJAX request or perform the necessary action
        // Once the action is completed, display the Sweet Alert notification
        Swal.fire({
            title: 'Success',
            text: 'Action successful!',
            icon: 'success',
            timer: 3000,
        });
    });
</script>

Ensure that the JavaScript code above is placed within a <script> tag or an external JavaScript file.

Conclusion:

Integrating Sweet Alert into your Laravel 10 project allows you to create visually appealing and interactive notifications. By following the steps outlined in this blog post, you can enhance the user experience and effectively communicate important updates or actions to your users. Experiment with different options and customization possibilities offered by Sweet Alert to make your notifications more engaging and user-friendly.