0

I am trying to connect Vue.js code with HTML page to render some data. I am not getting how to connect, I have given the below code which I have tried.

HTML:

                <!DOCTYPE html>
                <html lang="en">
                <head>
                    <meta charset="UTF-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <title>Document</title>
                </head>
                <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
                <script src='./vue.js'></script>
                <body>
                    <div id="app">
                        <h1>{{ message }}</h1>
                        </div>
                </body>
                </html>

Vue.js:

             var myObject = new Vue({
                el: '#app',
                data: {message: 'Hello Vue!'}
            })
Deni J.
  • 1,211
  • 3
  • 21
kp97338
  • 29
  • 7

2 Answers2

0

You should move your vue.js script at the end of the body section as described in the Vue.js tutorial you are doing.

<!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Document</title>
            </head>
            <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
            
            <body>
                <div id="app">
                    <h1>{{ message }}</h1>
                </div>
                <script src='./vue.js'></script>
            </body>
            </html>

More info on where to place your script tag: When to use the <script> tag in the head and body section of a html page?

Nicolas R
  • 156
  • 8
0

You can also leave as it is and change from:

 <script src='./vue.js'></script>

To

<script defer src='./vue.js'></script>
Tajeddine
  • 1
  • 1
  • 2