Hello all, I have some difficulties with Sage JS routing when loading my JS files.
Background Information
I have added map.js
route to Sage in-box routes folder.
routes
|-about.js
|-common.js
|-home.js
|-map.js <--- this one
This new route loads my Vue app when the page URL equals to map
. This way my site displays an interactive map on URL like http://welcomedog.test/map.
This is my map.js
code:
console.log('I do NOT want to load JS below on all pages')
import Vue from 'vue';
import store from '../vue/vue2-map/src/store';
import * as VueGoogleMaps from 'vue2-google-maps'
import AppComponent from '../vue/vue2-map/src/components/App.vue'
Vue.use(VueGoogleMaps, {
load: {
key: 'AIxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxg',
libraries: 'places',
},
})
export default {
init() {
// JavaScript to be fired on map page
console.log('this JS loads ONLY on /map url, this is fine')
new Vue({
el: '#map-app',
store,
components: {
app: AppComponent,
},
render: h => h('app'),
})
},
finalize() {
// JavaScript to be fired on all pages, after page specific JS is fired
},
};
As you can see, import
statements on top load a bunch of components on all pages. This happens because they are outside of init()
function.
Question
How do I load all my JS on /map
page only?