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="">
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.