vuejs-templates / webpack

A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
MIT License
9.71k stars 4.4k forks source link

Using VueJs in .Net MVC. everything compiles fine but i am getting an empty view #1529

Open fazalghaniqureshi opened 3 years ago

fazalghaniqureshi commented 3 years ago

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 :