Lately, I have been utilizing Vue in a project and encountered an issue where upon compiling, my browser page displays as white with an error message stating "You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build." showing up in the browser console.
This is the structure present in my index.html file:
<body id="page">
<div id="app">
<h1>{{Title}}</h1>
<input type="text" placeholder="Username" id="input" v-model="username"/>
<div>
<button id="button" v-on:click="play">Play</button>
</div>
<h1>{{Records}}</h1>
<dl id="list">
<dt v-for="user of users" id="data">
{{user.Username}} - {{user.Score}}
</dt>
</dl>
</div>
<script src="Views/welcomePage.js"></script>
</body>
In this case, I am importing Vue within my welcomePage.js file and it's crucial that I specifically import 'vue' rather than changing it to 'vue/dist/vue.js'. This is because I need to export the data stored in the username variable after information is inputted on the HTML file.
window.axios = require('axios');
import Vue from 'vue';
var app = new Vue({
el: '#app',
data:{
Records: 'Records',
Title: 'Snake',
users:[],
username: '',
},
mounted: function(){
axios.get('http://localhost:3000')
.then(res => this.users = res.data);
},
methods:{
play(){
console.log(app)
window.location.href = 'snake.html'
}
}
})
export default app.$data.username
My primary concern now is how can I resolve the display issues on my webpage?