What is the difference between this two very basic vue app?

Question

I've been learning Vue.js and I tried to have the root instance not erase the html content I put inside. The idea being that I could have a normal html page and Vue "watching" the main wrapper and if it run into a vue component it will be render by vue. I've managed to do that when I import the CDN of vue but not with the vue cli somehow. I don't understand the difference.

I made this codepen loading vue.js by the cdn and it render without problem

 <div id="app">
   <h1>My Vue.js App</h1>
   <p>{{ message }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello world'
  }
});

https://codepen.io/cvallee/pen/dLKVEP

But in codesandbox where it use vue cli nothing is render, the content of the root element flash and then disappear from the dom. No matter what I put into the main div it is erase as soon as the app mount. https://codesandbox.io/s/m5qvm40nkx

In the sandbox you are providing a mounting point but not a template for the vue instance to use. — Steven B.
Thanks Steven, but why in the sandbox the content of the <div id="app"> in the index.html file is not use a default template ? — Constant.V
Because codesandbox is using the vuejs runtime and not the compiler so it can't compile in-dom templates like that. — Steven B.
Oh I see, I didn't know there was multiple versions. I'm gonna have to read on that .Thanks ! — Constant.V

Mike T Mike T · Accepted Answer · 2019-04-22T17:12:21

I think the issue has to do with the way that the CodeSandbox loads the Vue app and triggers the initial render. If you add an App.vue file and change the main.js file to

import Vue from "vue";
import App from "./App.vue";

// Vue.config.productionTip = false;

new Vue({
  el: "#app",
  render: h => h(App)
});

and the index.html to

<!DOCTYPE html>
<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="icon" href="<%= BASE_URL %>favicon.ico" />
    <title>codesandbox</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

it works for me this way. Here is the working version - https://codesandbox.io/s/84ox08k24j

What is the difference between this two very basic vue app?

1 Answers