A Vue.JS directive that toggles the input type from text to password on blur; creating a secure input.

SecureInput.js

import Vue from 'vue';

Vue.directive('secure-input', {
    inserted(el) {
        el.type = 'password';
    },
    bind(el) {
        el.addEventListener('focus', () => {
            el.type = 'text'
        });

        el.addEventListener('blur', () => {
            el.type = 'password'
        });
    }
});