Javascript routing in Sage and importing Vue components

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?

This topic was automatically closed after 42 days. New replies are no longer allowed.