Javascript function in laravel not defined

Question

I added an js method to my app.js:

require('./bootstrap');

window.Vue = require('vue');

Vue.component('example', require('./components/Example.vue'));

const app = new Vue({
    el: '#app'
});

function hello()
{
    alert("hello");
}

Then compiled my assets and added app.js to my view:

<script src="{{ asset('js/app.js') }}"></script>

If i load my view at this point and look at the source i can see the link to app.js and if i open that app.js i can see my hello method in there with a lot of other stuff.

Now when i want to call my method i try to do it like this:

<a onclick="hello();">

But in my console i get an Uncaught ReferenceError: hello is not defined error. What could be the problem?

apokryfos · Accepted Answer · 2017-10-27 07:42:25Z

25

Laravel mix tends to compile all js assets into a nice webpackage, however this means that your function is not actually in the global scope because they are all wrapped in immediately invoked function expressions (iife).

You need:

window.hello = function () {
     alert("Hello");
}

However this generally not the best strategy, ideally you'd add an event handler in your vue.

edited Oct 27, 2017 at 7:42

answered Aug 1, 2017 at 17:52

apokryfos

40.9k11 gold badges85 silver badges128 bronze badges

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

1 Comment

Harris Over a year ago

same goes for vite also

Collectives™ on Stack Overflow

Javascript function in laravel not defined

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related