Using Noty to Dynamically Confirm Actions in Vue.js

Photo by Jon Tyson on Unsplash

“Are you sure you want to…?” — A million-dollar question (almost literally)

The question above typifies a fairly popular fail-safe mechanism in many User Experience designs, especially around actions whose consequences cannot be easily undone. When a user triggers certain actions like; delete an account, delete a record from a list, etc., we want to be sure that they meant to, otherwise, there’ll be too many users unintentionally tripping up these totally avoidable landmines within our applications, which consequently culminates in bad User Experience.

There’s an endless list of nifty tricks and tools out there to create a practical action confirmation implementation, but we’ll zero in on a simple implementation requiring Noty, in a Vue.js context.

But why Noty?

If you didn’t know Noty, it's a simple-to-use “…Dependency-free notification library”, that also happens to come out of the box with a clean action confirmation capability. Also, observe; Noty is well-maintained, battle-tested, and lightweight, so it doesn’t add unnecessary complexity to your application.

The Implementation

I assume you have a Vue.js project already set up, so I’ll just dive right in.

Consider the scenario below:

<template>
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-12">
            ...
            <button @click.prevent="confirmingAction('reset')" class="btn btn-warning mt-5 ml-2">Reset</button>
            <button :disabled="isSubmitting" @click.prevent="confirmingAction('submit')" class="btn btn-success mt-5 float-right">
                <span v-if="isSubmitting">Submitting...</span>
                <span v-else>Submit</span>
            </button>
            ...
        </div>
    </div>
</template>

The Vue component’s template contains an implementation of sort, but we’ll keep our focus on the roles of two buttons, each one responsible for triggering a different action when clicked — reset, and submit, respectively.

Let’s define these actions as well:

NB: Don’t forget to import Noty, and add any necessary CSS dependencies, depending on how you’re using the module. See the hows here.

<script>
    import Noty from 'noty';

    export default {
        ...
methods: {
            confirmingAction(action) {
                let context = this;
                var n = new Noty({
                    text: `Are you sure you want to ${action}?`,
                    buttons: [
                        Noty.button('YES', 'btn btn-primary mr-2', function () {
                            context[action]();
                            n.close();
                        }, {id: 'button1', 'data-status': 'ok'}),

                        Noty.button('NO', 'btn btn-danger', function () {
                            n.close();
                        })
                    ]
                });
                n.show();
            },
            reset() {
                // do some stuff...
                location.reload()
            },
            submit() {
                this.isSubmitting = true;
                // do some other stuff...
            },
        }
        ...
    }
</script>

I have streamlined the above code snippet just enough to demonstrate the relevant points in this guide.

Notice that each button calls the same method, confirmingAction when clicked, but passes a different argument unto the method? A new instance of Noty is created within the method. The instance accepts a configuration object that allows us to do some customization. See docs here for details.

Button 1:

Method: confirmingAction

Argument: ‘reset’

When confirmingAction resolves, the output of context[action]() will depend on the argument passed unto the method, and in this case, context[action]() will be resolved as this[‘reset’](), kinda like this.reset(). This also means text: `Are you sure you want to ${action}?` will simply output Are you sure you want to reset?

Button 2:

Method: confirmingAction

Argument: ‘submit’

When confirmingAction resolves, the output of context[action]() will also depend on the argument passed unto the method, and in this case, context[action]() will be resolved as this[‘submit’](), kinda like saying this.submit(). This also means text: `Are you sure you want to ${action}?` will simply output Are you sure you want to submit?

Each one will trigger the corresponding method when the user clicks YES in Noty’s confirm dialog while helping to keep our code DRY.

Have a bug-free day!