Import external js with Vue

Question

Say I have 2 js files in resources/assets/js , one is app.js & the other is ext_app.js

There is a function in ext_app.js as below:

function testFunction() {
    // function code
}

And in app.js :

require('./bootstrap');
require('./ext_app.js');

const app = new Vue({
    // other stuff

    mounted: function() {
        // Call my test function from ext_app.js
        testFunction();
    }
});

Ran npm run dev & look into public/js/app.js , the ext_app.js code is there, pretty good anyway. But, the app returns the following error when run on Chrome:

[Vue warn]: Error in mounted hook: "ReferenceError: testFunction is not defined"

What have I miss?

Answer 1

You need to export the testFunction before you can require it.

module.exports = function testFunction() {
   // function code
}