Using VueJs in .Net MVC. everything compiles fine but i am getting an empty view
fazalghaniqureshi opened this issue · comments
https://limelightmarketing.com/blogs/using-vue-cli-to-add-vue-to-existing-aspnet-web-apps/
i am using the above article to add vue to my existing asp.net web project, when build my project it says "Build complete. The Content\dist directory is ready to be deployed" in terminal but when run my view and call my vue page it shows empty page. can anyone help ?
My cshtml view :
@{
ViewBag.Title = "Hello World";
}
main.js code:
import Vue from 'vue'
//import App from './App.vue'
import ApiService from "./core/services/api.service";
import FlashMessage from '@smartweb/vue-flash-message';
Vue.use(FlashMessage);
Vue.use(VuetifyToast, {
x: 'right', // default
y: 'bottom', // default
color: 'info', // default
icon: 'info',
iconColor: '', // default
classes: [
'body-2'
],
timeout: 3000, // default
dismissable: true, // default
multiLine: false, // default
vertical: false, // default
queueable: false, // default
showClose: false, // default
closeText: '', // default
closeIcon: 'close', // default
closeColor: '', // default
slot: [], //default
shorts: {
custom: {
color: 'purple'
}
},
property: '$toast' // default
})
Vue.config.productionTip = false
//3rd party
import "@mdi/font/css/materialdesignicons.css";
import vuetify from "./core/plugins/vuetify";
import * as VueGoogleMaps from 'vue2-google-maps'
Vue.component('users-grid', require('./components/UsersGrid.vue').default);
Vue.component('user-card', require('./components/UserCard.vue').default);
Vue.component('users-card-grid', require('./components/UserCardGrid.vue').default);
Vue.component('live-map', require('./components/LiveMap.vue').default);
Vue.component('hello-world', require('./components/HelloWorld.vue').default);
window.Vue = Vue;
Vue.config.devtools = true
//new Vue({
// render: h => h(App),
//}).$mount('#app')
Vue.use(VueGoogleMaps, {
load: {
key: 'AIzaSyChDICPQih_-TCcBgU_K43SupU7LT6Espc',
libraries: 'places', // This is required if you use the Autocomplete plugin
// OR: libraries: 'places,drawing'
// OR: libraries: 'places,drawing,visualization'
// (as you require)
//// If you want to set the version, you can do so:
// v: '3.26',
},
//// If you intend to programmatically custom event listener code
//// (e.g. `this.$refs.gmap.$on('zoom_changed', someFunc)`)
//// instead of going through Vue templates (e.g. `<GmapMap @zoom_changed="someFunc">`)
//// you might need to turn this on.
// autobindAllEvents: false,
//// If you want to manually install components, e.g.
//// import {GmapMarker} from 'vue2-google-maps/src/components/marker'
//// Vue.component('GmapMarker', GmapMarker)
//// then disable the following:
// installComponents: true,
})
// API service init
ApiService.init();
new Vue({
vuetify
}).$mount('#app')
HelloWorld.vue :
{{ msg }}
For a guide and recipes on how to configure / customize this project,
check out the
vue-cli documentation.