Laravel and Vue: where to put js/app.js?

Question

I created a simple app using some Vue components and a Bootstrap component (carousel).

I compile my assets using Laravel Mix. When I put the compiled app.js between the head tags, my Vue components do not work ( Cannot find element: #app ). When I put the app.js just before the </body> tag, my carousel (the indicators ) does not work ... I also tried with the defer attribute, but no success. Do I have to split my JavaScript-files to make both work?

Edit:

When I put my asset just before the </body> tag, the indicators of the carousel looks like this: <="" li="">

Answer 1

In general, before the ending </body> tag.

<script type="text/javascript" src="/js/app.js"></script>

And if you have other bootstrap specific js codes, you have to write them after the above-mentioned script tag because app.js is also responsible for loading bootstrap required js files in the resources/assets/js/bootstrap.js file.

Answer 2

The message Cannot find element: #app does not mean, that vue do not work. It means, that Vue.js is mounted correctly but it can not find any div with the id of app :

<div id="app"></div>

To include an js file I would recommend the asset() helper:

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