2

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

Improve this question
0

2 Answers 2

Reset to default
4

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.

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

3 Comments

I am not writing other js codes, just the html needed to make the carousel work. But apparently bootstrap.js must run before the html .. because my carousel works when I put the compiled app.js in the header...
But what if the compiled app.js contains jquery library? Now I cannot write any jquery at the top of the page because using Vue requires me to put app.js at the bottom before ending /body tag.. I really dont see any way of compiling Vue and Jquery in the same app.js file as these two require to be placed at different position in the html
how can i acces variable defined on app.js in another js file?
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>
Improve this answer

4 Comments

My Vue scripts work when I put the asset file before the ending </body> tag. It's just that I want my carousel and Vue components to work at the same time.
Habe you put it in the head and added the div like I said?
yes! I've put it in the head and I have the div like you said, but it does not render because the head is loaded before the body I guess..
Do you find solution about this issue?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.