0

I'm trying to create the simplest hello world Vue app, and I keep getting devtools saying my mount cannot be found.

my app.js is

const app = Vue.createApp({
    data() {
      return {
        message: 'Hello Vue!!'
      }
    }
  })
  
  app.mount('#hello');

and my index.html is

html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Random User Generator
    </title>
    </head>
    <body>
        <script src="https://unpkg.com/vue@3.0.5"></script>
        <script src="./app.js"></script>
    
        <div id="hello" class="demo">
            {{ message }}
        </div>
    </body>
</html>

and style.css is

.demo {
    font-family: sans-serif;
    border: 1px solid #eee;
    border-radius: 2px;
    padding: 20px 30px;
    margin-top: 1em;
    margin-bottom: 40px;
    user-select: none;
    overflow-x: auto;
  }

When I run index.html with live server (vs code), I get just

{{ message }}

displaying in the browser, and in devtools, the significant error is

vue@3.0.5:1250 [Vue warn]: Failed to mount app: mount target selector "#hello" returned null.

Has anyone got a bare bones hello world Vue.js app to run? What am I missing?

JackS
  • 1
  • Move `` right before the closing `

    ` tag, where the DOM is actually ready (you run your code too early, when `#hello` does not exist yet)

     – blex Apr 10 '21 at 14:31
  • You got it right! I moved all js scripts below the
    to get it working. Thanks!
     – JackS Apr 11 '21 at 16:32

0 Answers0