[Vuejs]-Vue js, missing mapping from HTML to related JS

by

0👍

When I run your code in this snippet it seems to work fine:

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

Are you seeing any errors in the dev tools console? Also, add some logs inside your js file to make sure it’s executing at all.

0👍

Your home.html is not configured to use Vue via CDN correctly. Whilst it does load Vue via CDN, it does not specify that it needs to load home.js and setup the Vue instance.

Without diving into Spring Boot specifics for serving resources (e.g. home.js) as it’s not the root cause of the problem, update home.html to embed the script:

<!-- Note this is Vue 2 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

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

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

Notice that if you open home.html now in your browser it will work. Thus it will also work when Spring Boot serves it.

Leave a comment