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

Question

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')

Tom Franssen · Accepted Answer · 2018-03-17 16:51:25Z

2

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.

answered Mar 17, 2018 at 16:51

Tom Franssen

4564 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Marcs · Accepted Answer · 2019-12-12 14:55:37Z

0

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>

edited Dec 12, 2019 at 14:55

Marcs

3,8485 gold badges35 silver badges42 bronze badges

answered Mar 17, 2018 at 16:30

Rob Brander

3,7831 gold badge22 silver badges33 bronze badges

1 Comment

Tom Franssen Over a year ago

Yes I know. Except where do I place this? In VueCli 3 there is no index.html file anymore, like there was in VueCli 2, for example this one: github.com/TomFranssen/iris-vue/blob/master/index.html

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related