Unable to Display "Hello World" in Vue.js

Question

Unable to Display "Hello World" in Vue.js

I am attempting to launch the Vuejs hello world project on a Cloud 9 development environment. Despite its simplicity, I am unable to determine why it is not rendering, even though there are no visible errors. What could be the issue here?

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1a6c6f7f5a283428342e">[email protected]</a>"></script>
         <script type="text/javascript">
            new Vue({
                el: '#app'
                data: {
                    message: 'Hello World!'
                }
            });
        </script>
    </head>
    <body>
        <div id="app">{{ message }}</div>
     </body>   
</html>

javascript vue.js vuejs2

Answer 1

Answer №1

Make sure your script is placed at the bottom of the body tag. Placing it in the head section will cause it to run before the rendering of #app, resulting in no action.

Additionally, don't forget to add a comma after el: "#app",

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://example.com/script.js"></script>
</head>
<body>
    <div id="app">{{ message }}</div>
     <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                message: 'Hello World!'
            }
        });
    </script>
 </body>

Answer 2

Make sure your script is placed at the bottom of the body tag. Placing it in the head section will cause it to run before the rendering of #app, resulting in no action.

Additionally, don't forget to add a comma after el: "#app",

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://example.com/script.js"></script>
</head>
<body>
    <div id="app">{{ message }}</div>
     <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                message: 'Hello World!'
            }
        });
    </script>
 </body>

Answer 3

Answer №2

It seems like the issue was that your written file wasn't placed at the bottom and you didn't include a comma(,) between 'el' and 'data', which caused the script not to display the result. Hopefully, this adjustment resolves the problem.

<!DOCTYPE html>
<html>
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>  
    </head>
    <body>
        <div id="app">{{ message }}</div>
     </body>   
    <script type="text/javascript">
      new Vue({
        el: '#app',
        data: {
          message: 'Hello World!'
           }
       });
    </script>
</html>

Answer 4

It seems like the issue was that your written file wasn't placed at the bottom and you didn't include a comma(,) between 'el' and 'data', which caused the script not to display the result. Hopefully, this adjustment resolves the problem.

<!DOCTYPE html>
<html>
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>  
    </head>
    <body>
        <div id="app">{{ message }}</div>
     </body>   
    <script type="text/javascript">
      new Vue({
        el: '#app',
        data: {
          message: 'Hello World!'
           }
       });
    </script>
</html>

Unable to Display "Hello World" in Vue.js

Answer №1

Answer №2

Similar questions

Encountering an issue when trying to activate Vue UI: spawn cmd ENOENT error

At times, Nuxt.js Oauth can lead to a complete webpage crash

Incorporating a new element through the simple act of clicking a

When the div is refreshed, the input box should retain the text instead of clearing it

jQuery .click() function doesn't seem to be triggering as anticipated

Enhance your WordPress site by implementing infinite scroll with AJAX to seamlessly load more posts

Adjust the top position of a div element at regular intervals

Removing automatically assigned ID information in Firestore can be achieved by following these steps:

Arrangement of 'const' variables within React Stateless Components

The objects-to-csv module encountered an error: fs.existsSync is not a valid function for this

Tips for avoiding multiple instances of Vue Snotify confirm from appearing

Can the Flash Configurator be converted to PHP or Javascript?

Get around operator precedence in JavaScript

The start task for the Gradle/Grails project :client could not be located

Show parent menu when child menu is clicked

Record the end time of a JavaScript stopwatch and save it into a PHP variable

Enhance your Angularfire experience with $firebaseArray by enabling dynamic counting and summing

The error being thrown is related to Next.js 13 cache setting of 'no-store'

Retrieve the data of the current component from the slot template

Tips for accessing the 'styled' function in Material UI ReactHow to utilize the 'styled' function