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);
//3rd party
import "@mdi/font/css/materialdesignicons.css";
import vuetify from "./core/plugins/vuetify";
import * as VueGoogleMaps from 'vue2-google-maps'
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.
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)
})
// 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.
Installed CLI Plugins
Essential Links
Ecosystem