how to use vue.js in simple web application?

Question

I am gonna planning to use vue.js in a web application. but it could not loaded and not fired html in browser. Please look at my below code:


<!DOCTYPE html>
<html>
    <head>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

</script>

&#060;/head&#062;


<body>
<div id="app">
  {{ message }}
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>

</body>
</html>

try to put your <script> inside <body>?

Donald Wu
– Donald Wu

2016-12-30 07:57:54 +00:00
Commented Dec 30, 2016 at 7:57 — Donald Wu
– Donald Wu, Commented Dec 30, 2016 at 7:57

Gnujeremie · Accepted Answer · 2018-06-26 16:13:20Z

10

The problem is you're trying to create Vue instance before vue.js is loaded, so I think if you put your code after vue.js, your application will work fine.

<!DOCTYPE html>
<html>
<head></head>
<body>

<div id="app">
  {{ message }}
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    });

</script>

</body>
</html>

edited Jun 26, 2018 at 16:13

Gnujeremie

6044 silver badges17 bronze badges

answered Dec 30, 2016 at 8:03

Wenli He

3534 silver badges10 bronze badges

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

Collectives™ on Stack Overflow

how to use vue.js in simple web application?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related