Lazy Loading

[sowinski]

Hi,

how can I implement lazy loading for this component?

[xkjyeah]

Short answer is, you can't, because the library needs to be installed as a plugin at the start.

However, the library never loads the Google maps API unless a component from the library is used. Hope that helps.

On Fri, 22 Mar 2019, 00:57 sowinski, [email protected] wrote:

Hi,

how can I implement lazy loading for this component?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/xkjyeah/vue-google-maps/issues/595, or mute the thread https://github.com/notifications/unsubscribe-auth/ACiTR6X0WqdY8_-0UEGlCRlF061gdl0Eks5vY7nqgaJpZM4cB6lN .

[robertsLando]

I'm interested in this feature too.. I would like to set the gmap api key dinamically. How can I do this? @xkjyeah

[robertsLando]

Got it:

import { loadGmapApi } from "vue2-google-maps";

...

 async beforeMount() {    

    loadGmapApi({
      key: "<apiKey>"
      // v: '3.24',                // Google Maps API version
      // libraries: 'places',   // If you want to use places input
    });
  },

[notflip]

This doesn't seem to be working, is this deprecated? can't seem to find it in the docs

[garcia206]

@robertsLando You can achieve this using environment variables.

.env.development NODE_ENV=development GOOGLE_MAP_API_KEY=zzz-zzz

.env.production NODE_ENV=production GOOGLE_MAP_API_KEY=yyy-yyy

main.js Vue.use(VueGoogleMaps, { load: { key: process.env.GOOGLE_MAP_API_KEY, }, });

[robertsLando]

My problem is that the apikey is manually inserted by the user on runtime so this is not possible with env vars, I have done it as described above

Daniel

On 11 Sep 2019, at 23:03, Edrei Garcia [email protected] wrote:

@robertsLando You can achieve this using environment variables.

.env.development NODE_ENV=development GOOGLE_MAP_API_KEY=zzz-zzz

.env.production NODE_ENV=production GOOGLE_MAP_API_KEY=yyy-yyy

main.js Vue.use(VueGoogleMaps, { load: { key: process.env.VUE_APP_GOOGLE_MAP_API_KEY, }, });

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[notflip]

Found a way to do it.

Install the plugin without specifying options

Vue.use(VueGoogleMaps);

In your component

beforeMount () {
    VueGoogleMaps.loadGmapApi({
      key: 'your-g-api-key,
      libraries: 'places'
    })
  },

[robertsLando]

Thanks Miguel for your answer but as I told you that is what I have already done :) it’s like the answer above

On 12 Sep 2019, at 07:33, Miguel Stevens [email protected] wrote:

Found a way to do it.

Install the plugin without specifying options

Vue.use(VueGoogleMaps); In your component

beforeMount () { VueGoogleMaps.loadGmapApi({ key: 'your-g-api-key, libraries: 'places' }) }, — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[notflip]

@robertsLando It's different, since it doesn't depend on environment variables, but you can use ajax methods and vuex store methods for example, since it's embedded in your component, whereas your fix above still needs the data in the main.js, before the main Vue component is loaded.

[ghisleouf]

Hi there,

I have a question related to your answers @notflip . I have setup the plugin as you explained, but, it as no impact to my built app.js file, right ?

If I analyze the bundle (with BundleAnalyzer), I can see that :

The thing, when I install the plugin in my app, I need to import it :

import * as VueGoogleMaps from 'vue2-google-maps'

and then, install it :

Vue.use(VueGoogleMaps)

So, since I import it "globally", the size remains the same, correct ? Is there a way to reduce this initial import ?

Thanks for your help.

[notflip]

@ghisleouf I'm not sure if I understand correctly, but what would you like to reduce? I guess you're using the whole code, since the import requires import * as VueGoogleMaps, not sure though!

[ryzhak-andrii]

@robertsLando You can achieve this using environment variable .

.env.development NODE_ENV=development GOOGLE_MAP_API_KEY=zzz-zzz

.env.production NODE_ENV=production GOOGLE_MAP_API_KEY=yyy-yyy

main.js Vue.use(VueGoogleMaps, { load: { key: process.env.GOOGLE_MAP_API_KEY, }, }); It's not working

[nachogarcia]

@ghisleouf means that instead of having a global plugin with Vue.use, which causes all the code to be in the common bundle since you need to tho the whole import, being able to use it only in the component that is needed

[ghisleouf]

Exactly @nachogarcia ! Sorry for my lack of explanation about it !