CODEWITHSUNDEEP
vue.jsvuejs2vue-component
Juliver Galleto
Juliver Galleto

Reputation: 9047

call external javascript functions inside vue instance

Below is the set of external javascript functions that I'm calling from a vue instance

// debounce
function debounce(func, wait, immediate) {
    let timeout;
    
    return function() {
        let context = this, args = arguments;
        later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
    
        let callNow = immediate && !timeout;

        clearTimeout(timeout);

        timeout = setTimeout(later, wait);

        if (callNow) func.apply(context, args);
    };
}
// -- end debounce

// animate css
function animateCss(element, animationName, callback) {
    const node = document.querySelector(element)
    node.classList.add('animated', animationName)
    
    function handleAnimationEnd() {
        node.classList.remove('animated', animationName)
        node.removeEventListener('animationend', handleAnimationEnd)
    
        if (typeof callback === 'function') callback()
    }
    
    node.addEventListener('animationend', handleAnimationEnd);
}
// -- end animate css

and my vue instance

new Vue({
    el: '#app',
    template: '#search-tpl',
    methods: {
        onKeyDown: debounce(function(){
            animateCss('#searchboxui-wrapper', 'fadeOutDown',function(){
                document.querySelector('#searchboxui-wrapper').style.display = 'none';  
            });
        }
    }
})

but it always throws me undefined, even if I declare the axios package or socketio package, it throws me undefined, any help, ideas please?

PS: I'm using Vue CLI 3

enter image description here

Upvotes: 2

Views: 8695

Answers (1)

Nikola Kirincic
Nikola Kirincic

Reputation: 3757

Create external js file, say externals.js, use import to import everything or specific functions from this file and use them in your Vue code:

Content in externals.js:

// debounce
function debounce(func, wait, immediate) {
    let timeout;

    return function() {
        let context = this, args = arguments;
        later = function() {
            timeout = null;

            if (!immediate) func.apply(context, args);
        };
        
        let callNow = immediate && !timeout;

        clearTimeout(timeout);

        timeout = setTimeout(later, wait);

        if (callNow) func.apply(context, args);
    };
}
// -- end debounce
        
// animate css
function animateCss(element, animationName, callback) {
    const node = document.querySelector(element)
    node.classList.add('animated', animationName)
        
    function handleAnimationEnd() {
        node.classList.remove('animated', animationName)
        node.removeEventListener('animationend', handleAnimationEnd)
        
        if (typeof callback === 'function') callback()
    }
        
    node.addEventListener('animationend', handleAnimationEnd);
}
// -- end animate css

export {debounce, animateCss}

Content in VueJS:

import {debounce, animateCss} from '../../js/externals.js'
    
new Vue({
    el: '#app',
    template: '#search-tpl',
    methods: {
        onKeyDown() {
            debounce(function() {
                animateCss('#searchboxui-wrapper', 'fadeOutDown', function() {
                    document.querySelector('#searchboxui-wrapper').style.display = 'none';
                });
            });
        }
    }
});

Upvotes: 2

Related Questions