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.js “watching” the main wrapper and if it run into a vue.js component it will be render by vue. I’ve managed to do that when I import the CDN of vue.js but not with the vue.js 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.js 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
Solution :
I think the issue has to do with the way that the CodeSandbox loads the vue.js app and triggers the initial render. If you add an App.vue.js file and change the main.js file to
import vue.js 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