I decided to try writing a simple component in "ASP.NET Core with Vue.js" template using pure JS instead of Typescript. However, I encountered an issue where my port does not seem to work properly. What could be causing this problem?
in ./ClientApp/components/test/test.vue Module parse failed: ...\components
\test\test.vue Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
| <h3>Sign Up!</h3>
| <div class="form-group">
@ ./ClientApp/boot.ts 10:36-81 @ multi event-source-polyfill webpack-hot-
middleware/client?path=__webpack_hmr&dynamicPublicPath=true ./ClientApp/boot.ts
<template>
<h3>Sign Up!</h3>
<div class="form-group">
<label>Username:</label>
<input type="text" placeholder="Username" v-model="user.login">
<button @click="submit">Submit</button>
</div>
</template>
<script>
export default
{
data() {
return{
user:{
login: ''
}
};
},
methods:{
submit(){
this.$http.post('http://API:1234/post', this.user)
.then (response => {
console.log(response);
},
error =>{
console.log(error);
});
}
}
}
</script>
boots ts
import './css/site.css';
import 'bootstrap/dist/js/npm';
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const routes = [
{ path: '/', component: require('./components/home/home.vue.html') },
{ path: '/counter', component: require('./components/counter/counter.vue.html') },
{ path: '/fetchdata', component: require('./components/fetchdata/fetchdata.vue.html') },
{ path: '/test', component: require('./components/test/test.vue') }
];
new Vue({
el: '#app-root',
router: new VueRouter({ mode: 'history', routes: routes }),
render: h => h(require('./components/app/app.vue.html'))
});