Creating a Modal Notification with Vue SweetAlert

While JavaScript popup boxes can create prompt notifications, they can also display crucial messages, confirmations, warnings, and other information. However, using them effectively requires the right tools and procedures. Vue Sweetalert enters the picture as an aid for developers at this point.

Vue Sweetalert is a simple plugin that connects with Vue.js applications, allowing developers to create pleasing and configurable modal notifications easily.

This article will teach you how to create a responsive, customizable modal using the Vue plugin SweetAlert, along with the fundamentals of JavaScript popup boxes, before moving on to the plugin to help you understand how it works.

What is Vue Sweetalert

Vue SweetAlert is a JavaScript library that simplifies the creation of customizable popup messages and modal dialogs. It is a versatile alternative to traditional JavaScript popup boxes and functions as a wrapper component with server-side rendering (SSR) support.

Furthermore, Vue SweetAlert lets us show a wide range of popup messages, including success notifications, error alerts, confirmations, and more, while letting us tailor styling and content to our specific needs. This flexibility enables us to craft engaging and visually appealing popup dialogs on our websites.

Creating a Basic Modal Notification with JavaScript

Before we integrate SweetAlert into our application, let’s review basic code examples of the three types of popup boxes JavaScript offers. These popup boxes are alert boxes, prompt boxes, and confirm boxes. Let’s dive into the code examples to see how they work:

        <script>
            // Example of an alert box
            function showAlert() {
                alert("This is an alert box. Click OK to continue.");
            }
            // Example of a prompt box
            function showPrompt() {
                const result = prompt("Please enter your name:", "");
                if (result !== null) {
                    alert("Hello, " + result + "! You entered your name.");
                }
            }
            // Example of a confirm box
            function showConfirm() {
                const isConfirmed = confirm("Are you sure you want to proceed?");
                if (isConfirmed) {
                    alert("You clicked OK!");
                } else {
                    alert("You clicked Cancel!");
                }
            }
        </script>
    <div>
        <button onclick="showAlert()">Show Alert Box</button>
        <button onclick="showPrompt()">Show Prompt Box</button>
        <button onclick="showConfirm()">Show Confirm Box</button>
    </div>

The code example above illustrates how JavaScript popup boxes work and how they behave in different scenarios. Copy and paste the code into your code editor or development environment to see the results firsthand. This hands-on experience will give you a clear understanding of how these popup boxes work before you move on to a new alternative called SweetAlert.

Setting Up Development Environment

The first step in this post is to create a new Vue project. To begin, open a terminal, locate the directory where you would like the new project to be created, and run the following command:

npm init vue@latest

Next, you will see a prompt asking you to confirm additional dependencies you want to include in your project. The command will create a folder structure for our new project.

Integrating Vue Sweetalert in Vue Project

The next step is to install and configure sweetalert in our Vue project so we can get started. Navigate to the new project we created and use the following command to set up SweetAlert in our new project:

       npm install -S vue-sweetalert2

or

        Yarn add vue-sweetalert2

In addition to installing SweetAlert through the npm package, we can use our project’s CDN file for quick integration. A separate stylesheet is also available if needed.

Let’s move on to the next phase: setting up SweetAlert in our Vue project so we can start using it. Go to the recently created project and copy and paste the following code into our main.js file to enable it.

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'

import VueSweetalert2 from 'vue-sweetalert2';
import 'sweetalert2/dist/sweetalert2.min.css';

const app = createApp(App);
app.use(VueSweetalert2);
app.mount('#app');

In the code example above, we imported SweetAlert styles to ensure an appealing design for our popup box. Without these styles, the content within the popup box may appear disorganized.

Creating a Modal notification with Vue Sweetalert

Now that we have successfully integrated the SweetAlert library into our project, let’s explore how it functions. In our following example, we will begin with a simple model and then delve into customizing it to create a distinct appearance. To do that, we will create a new file and copy this code into the file created:

    <template>
        <button @click="showAlert">Close browser</button>
    </template>
    <script>
    export default {
      methods: {
        showAlert() {
          this.$swal({
            title: 'Close all tabs ?',
            text: 'You have 8 tabs open in this browser window. If you close this browser you will lose all your tabs.',
            type: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Close all',
            cancelButtonText: 'Cancel',
            showCloseButton: true,
            showLoaderOnConfirm: true
          })
        },
      },
    };
    </script>

 

The following example shows how to further customize our popup box by adding a conditional statement, an icon, and a tailored button. This hands-on demonstration shows how to personalize popup notifications to meet specific requirements and improve user interactions. To do that, copy the code below and replace it with the previous code example in the new file we created

    <template>
      <div class="wrapper">
        <button @click="showAlert">Delete file</button>
      </div>
    </template>
    
    <script>
    export default {
      methods: {
        showAlert() {
          this.$swal({
            title: 'Delete file?',
            text: 'Deleting this file will also delete it from our database.',
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#4CAF50',
            cancelButtonColor: '#f44336',
            confirmButtonText: 'Yes, delete this file',
            cancelButtonText: 'Cancel',
            showCloseButton: true,
            showLoaderOnConfirm: true
          }).then((result) => {
            if (result.value) {
              this.$swal('Deleted', 'You have successfully deleted this file, and it has been removed from our database.', 'success')
            } else {
              this.$swal('Cancelled', 'Your file has been saved', 'info')
            }
          })
        },
      }
    }
    </script>

The examples above show how easily we can integrate SweetAlert into our Vue project and create appealing modal notifications. SweetAlert can be used in many ways, such as for user authentication, cookie consent, and newsletter sign-ups. Generally, it is used for sharing popup messages or information with users.

Conclusion

SweetAlert offers versatile features that let us craft highly customizable modal notifications. These capabilities include images, icons, GIFs, custom HTML, animations, and timers.

Each feature is crucial to designing visually appealing, engaging notifications.

To explore these functionalities in depth, I encourage you to review the documentation to comprehensively understand what SweetAlert offers.