Emily Emily - 1 month ago 18
Javascript Question

Why Won't This Vuejs "Hello World" Example Render On My Computer?

I'm trying to use Vue with a Phoenix/Elixir project. After a great deal of troubleshooting I still could not get Vuejs elements to render. So I decided to test the simple "hello world" example in raw html/js.

It won't work either. What am I doing wrong?

Here's the jsfiddle I'm trying to duplicate on my computer:
https://jsfiddle.net/yyx990803/okv0rgrk/

Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Vue Test</title>

<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>

<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>

</head>
<body>

<div id="app">
{{ message }}
</div>

</body>
</html>

Answer

Put your second script tag before </body>. The reason your code isn't working is because you're trying to mount #app before it exists. If you try to mount it after it's there it'll be fine.