Writing a Portable Vue.js Logic with Mixins — A Noty-based Notification System

Photo by jesse orrico on Unsplash

NB: All my featured code snippets will be summarized to only capture the most crucial details in context of the topic aspect under discussion.

The Problem

As complexity grows through the development cycles of our application, we may from time to time, start to feel the need to replicate one or more existing functionality in multiple parts of our app. A good example of such a handy functionality is a notification system, since we may need to fire up a notification for more than one occasion throughout our app.

For context, consider two Vue components; UserProfile.vue, and MessageInbox.vue. Each one has multiple actions requiring notification —

NB: Don’t forget to intall and import; Noty, Axios, and any other necessary JS/CSS dependencies in your app. See the hows on setting up Noty here.

Component 1. UserProfile.vue

<script>
    import axios from 'axios';
    import Noty from 'noty';

    export default {
        ...
        methods: {
            update() {
                axios.post('/update', { id: this.user.id })
                    .then(({data}) => {
                        // do something...
                        this.notify('success', 'Your profile has been updated!');
                    })
                    .catch(err => {
                        // do something else...
                        this.notify('error', err.response.data.error);
                    })
            },
            notify(type, text, layout = 'topRight') {
                new Noty({
                    text,
                    type,
                    layout,
                    theme: 'mint',
                    timeout: 5000,
                }).show();
            }
        }
        ...
    }
</script>

Observe that a notification is triggered on two scenarios:

1. When a user successfully updates their profile
2. When an error occurs while a user’s profile is being updated

Component 2. MessageInbox.vue

<script>
    import axios from 'axios';
    import Noty from 'noty';
    export default {
        ...
        methods: {
            delete({id}) {
                axios.delete('/delete', { id })
                    .then(({data}) => {
                        // do something...
                        this.notify('success', 'Your message has been deleted!');
                    })
                    .catch(err => {
                        // do something else...
                        this.notify('error', err.response.data.error);
                    })
            },
            notify(type, text, layout = 'topRight') {
                new Noty({
                    text,
                    type,
                    layout,
                    theme: 'mint',
                    timeout: 5000,
                }).show();
            }
        }
        ...
    }
</script>

Similarly, observe that a notification is triggered on two scenarios as well:

1. When a user successfully deletes a message
2. When an error occurs while trying to delete a message

With this approach, we keep replicating the notify method in as many components requiring notification as possible. There’s gotta be a better way, right? right?

A Better Way — the Mixins way

What if we could write our notify method in a module, in one single place, and then import it for use in any components where it’s needed?

Let’s look into this…in two quick steps:

1. Create a mixins module and move our notify method into it.
2. import into our two components and refactor our notification instances.

Let’s create a js file in our components > mixins directory. I’ll call it utilities.js. Should look something like this:

// step 1
import Noty from 'noty';

export default {
    methods: {
        notify(type, text, layout = 'topRight'){
            new Noty({
                text,
                type,
                layout,
                theme: 'mint',
                timeout: 5000,
            }).show();
        }
    }
};

Then…

// Step 2 - part 1
// UserProfile.vue
<script>
    import axios from 'axios';
    import notify from './mixins/utilities';

    export default {
        ...
        mixins: [notify],
        methods: {
            update() {
                axios.post('/update', { id: this.user.id })
                    .then(({data}) => {
                        // do something...
                        this.notify('success', 'Your profile has been updated!');
                    })
                    .catch(err => {
                        // do something else...
                        this.notify('error', err.response.data.error);
                    })
            }
        }
        ...
    }
</script>

And…

// Step 2 - part 2
// MessageInbox.vue
<script>
    import axios from 'axios';
    import notify from './mixins/utilities';

    export default {
        ...
        mixins: [notify],
        methods: {
            delete({id}) {
                axios.delete('/delete', { id })
                    .then(({data}) => {
                        // do something...
                        this.notify('success', 'Your message has been deleted!');
                    })
                    .catch(err => {
                        // do something else...
                        this.notify('error', err.response.data.error);
                    })
            }
        }
        ...
    }
</script>

Now we have our notify method refactored into mixins, and Vue.js then allows us to then pull that in into as many components as we need to. And the best part is, we can abstract as many methods as possible into our utilities.js (or whatever we chose for a name), and use it in any components within our application. Good stuff, yeah? I know ;)

In conclusion, mixins can really help to alleviate repetition within our Vue.js codebase. Maybe it’s something you’ve been wanting to try your hands on? I promise it’s worth the effort.

Happy coding!