Search code examples
javascripttwitter-bootstrapvuejs2bootstrap-4laravel-5.5

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


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


Solution

  • 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.