Home » vue » Vue CLI generates empty body with error: Cannot find element: #app after migration vuecli 2>3

Vue CLI generates empty body with error: Cannot find element: #app after migration vuecli 2>3

Posted by: admin November 26, 2021 Leave a comment

Questions:

I am trying to migrate my VueJS project from VueCLI 2 to 3.
All the files are copied over to the src folder.
When I try to view it in the browser using npm run serve then I get this HTML with no <div id="app"> present:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
    <link rel="preload" as="script" href="/app.js">
    <link rel="icon" type="image/png" sizes="32x32" href="/img/icons/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/img/icons/favicon-16x16.png"><link rel="manifest" href="/manifest.json"> 
   <meta name="theme-color" content="#4DBA87"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta name="apple-mobile-web-app-title" content="iris-vue2"><link rel="apple-touch-icon" href="/img/icons/apple-touch-icon-152x152.png"><link rel="mask-icon" href="/img/icons/safari-pinned-tab.svg" color="#4DBA87"><meta name="msapplication-TileImage" content="/img/icons/msapplication-icon-144x144.png"><meta name="msapplication-TileColor" content="#000000">
    </head>
    <body>
    <script type="text/javascript" src="/app.js"></script>
    </body>
</html>

The console gives this error:

vue.runtime.esm.js?ff9b:587 [Vue warn]: Cannot find element: #app

Where does the HTML get rendered from? In the previous version of VueCLI there was an index.html file. Now that’s missing?

In my main.js I do the same as what’s in the boiler plate when initializing a new priject:

new Vue({
    i18n,
    router,
    store,
    render: h => h(App)
}).$mount('#app')
Answers:

I figured it out! The new index.html isn’t in the root anymore. In VueCli 3 this is in the /public folder!

So I had to move /index.html to /public/index.html.

###

I think you need to create a place in the DOM for the rendering to happen. In this case the application is looking for an element with the id of ‘app’.

<body>
  <div id="app"></div>
  <script type="text/javascript" src="/app.js"></script>
</body>