5 months ago

$ is not defined vs #app is not found

Posted 5 months ago by Tommy001

I am sure this question is really silly, but please bare with me. I would like to learn the best way to solve this problem.

In the head section of my layouts/app.blade.php I call the public/js/app.js script that has been compiled by Laravel-Mix. Among other things Jquery is added in that file.

So far so good, everything works. BUT, now I want to add my first Vue components using the example component as a starting point, provided as default in the Laravel project.

When trying this new Vue function out the console complains about not finding the "#app" element. So instead of calling public/js/app.js in the head section I move that call to a position just before the ending body tag, after the content is rendered.

Now, the Vue function starts to work BUT all custom scripts depending on jQuery in the blade templates stops working and the console complains about $ is not defined.

So I figure that I need to load Jquery in the head section and public/js/app.js just before the body tag. But that would mean that I load Jquery twice. Is there a standard solution to this?

Please sign in or create an account to participate in this conversation.