Emily Emily - 4 years ago 117
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:

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">
<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>

new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'


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


Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download