[Vuejs]-Vue script loaded

by

2👍

✅

Your issue is that you are loading your vue file before the DOM is loaded. It cannot find your id="app" since it hasn’t loaded it.

In my projects I have all my html and then load the vue.js file right before the </body> end tag. Like so:

<body>
    <div id="app" style="margin-top:100px;">
        {{message}}
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
    <script src="/myfile.js"></script>
</body>

This is best practice to prevent render blocking scripts. When you put JavaScript in your <head> it has to load those file before the <body> can start rendering.

👤Eric G

Leave a comment