How to Use Vue.js Inside of Sweet Alert 2 Modals

One of the challenges any developer may encounter when using multiple packages/libraries is how to have them work together. This can be particularly tricky when they aren’t created with each other in mind. This article will show how to use Vue.js components inside of Sweet Alert modals without depending on other packages to do it for us.

I will make the assumption that you have installed Vue.js and Sweet Alert 2 in your project. If not, take a look at some of the links at the end to read the official Vue.js and SweetAlert2 guides. I will not be covering how to install those in this article.

Now unto the good stuff!

Step 1: Create your Vue.js single file component

Go to wherever your components are located and add a component you would like to exist inside of the Sweet Alert 2 modal. For this article we will create a very basic notes component where the user can add a note to a list.

Notes.vue (a single file component)

You’ll notice there are two props: title and noteProp. This is to test that our component can receive non-reactive data and use it inside the component from within the Sweet Alert 2 modal.

Let’s register this component with our application. Depending on how you are running Vue.js, it may also be necessary to register it with the Vue root instance.

Registering Notes.vue with Vue root instance

Step 2: Create a method which will call the Sweet Alert 2 modal with the component you specify.

We will be creating a method that mounts our component of choice and then appends that component to our Sweet Alert 2 modal. The first parameter will be the name of the single file component as you registered it with your app in Step 1. The second parameter will be the props data you want to pass into the component.

Note: This method will need to have access to Vue and Sweet Alert 2.

Function that mounts our single file Vue component and displays it in a Sweet Alert modal !

You should place this code wherever you feel is appropriate for your use case. Since I am using Laravel I will add it to the head of my master file which is extended across my application. In the master head I will place it in _modals.js file.

Our master.blade.php file which will be extended across our application

Step 3: Call the method (yay 😃)!

A few things before you do (aww).

1. You should be able to call this method from inside of script tags, other Vue components or any JavaScript code which has access to the method you created.
2. The Vue component instance is destroyed when you close the modal so any data inside that was not saved will be lost. Depending on your use case you may have to think of ways to persist the data inside of the component either by using a package like Vuex, or by making database queries inside of the component, etc.
3. A new Vue component instance is mounted every time you call the method.
4. Inside of the Vue component you can use the Sweet Alert close() method to close the modal.

The code below shows an example of calling the method from a basic Javascript script. You can see the second parameter I passed contained an object with the title and noteProp values we discussed earlier.

Invoking our VueSweetAlert2 method from basic javascript

Finally...

Our VueSweetAlert2 modal in action!

Notice how it contains the title and notes we passed in. Additionally, with Vue.js and Sweet Alert 2 you can make this modal fit into any theme or make it look however you want.

To read more about how you can get started with Vue.js and Sweet Alert check out these links:

Vue.js: https://vuejs.org/v2/guide/
SweetAlert2: https://sweetalert2.github.io/

If you have any questions or something you want to be clarified please comment below!