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?

barro32 · Accepted Answer · 2018-09-30 10:13:47Z

3

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

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

edited Sep 30, 2018 at 10:13

answered Jul 27, 2018 at 10:49

barro32

2,71825 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Import external js with Vue

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related