A way to import component locally

[Momciloo]

I am using google maps only in the admin-restricted part of the app, so I don't need to include it globally. Is there any way to import this component locally, instead of registering it globally in the main.js?

Thanks!

[xkjyeah]

Hmmm. Good point. Let me think about it

On 29 Jan 2018 01:24, "Momcilo Popov" [email protected] wrote:

I am using google maps only in the admin-restricted part of the app, so I don't need to include it globally. Is there any way to import this component locally, instead of registering it globally in the main.js?

Thanks!

— 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/302, or mute the thread https://github.com/notifications/unsubscribe-auth/ACiTRwXtYuWXe50-ieSh-mukDJ6wwobSks5tPK1AgaJpZM4Rvxm- .

[vesper8]

I have a similar issue @xkjyeah

I only use the map inside on a page where the user needs to authenticate, and having it as part of my main.js is causing my Lighthouse Audit performance number to be way bad because it seems to the googlemaps api calls take a long time to finish and add a few seconds to my "fully loaded" numbers

I wish there was a way to conditionally only load it when it is actually needed

[xkjyeah]

I'm working on a feature to avoid having to load the API except when a component is rendered that requires it.

Will try to release it soon -- maybe by this weekend

On Wed, 11 Jul 2018, 22:09 C-Bass, [email protected] wrote:

I have a similar issue @xkjyeah https://github.com/xkjyeah

I only use the map inside on a page where the user needs to authenticate, and having it as part of my main.js is causing my Lighthouse Audit performance number to be way bad because it seems to the googlemaps api calls take a long time to finish and add a few seconds to my "fully loaded" numbers

I wish there was a way to conditionally only load it when it is actually needed

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/xkjyeah/vue-google-maps/issues/302#issuecomment-404183125, or mute the thread https://github.com/notifications/unsubscribe-auth/ACiTRxc8uOVExk-UkweMuQINuewi3_CEks5uFgcIgaJpZM4Rvxm- .

[vesper8]

@xkjyeah sorry haven't really kept up with your updates.. did you end up releasing this?

[xkjyeah]

Yup it's in. There's also a test written for it https://github.com/xkjyeah/vue-google-maps/blob/vue2/test/maps-not-loaded.js

Let me know if it works for you?

On Sat, 13 Oct 2018 at 20:14, C-Bass [email protected] wrote:

@xkjyeah https://github.com/xkjyeah sorry haven't really kept up with your updates.. did you end up releasing this?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/xkjyeah/vue-google-maps/issues/302#issuecomment-429537075, or mute the thread https://github.com/notifications/unsubscribe-auth/ACiTR2mcZDt4exkHT5avaI66XLVXHd9wks5ukdkggaJpZM4Rvxm- .

[joaumg]

Even if the Google Map Script isn't loaded, the vue2-google-maps components get into the main.js which hits the landing page SEO score of every single website that uses this package.

The real solution here is component based:

import GmapMap from 'vue2-google-maps/src/components/map'
import GmapMarker from 'vue2-google-maps/src/components/marker'
import { loadGmapApi } from 'vue2-google-maps'

export default {
  created () {
    loadGmapApi({ key: 'foobar', /* ... */ })
  }
  // ...
}

So it can be used only on the pages REALLY used.

Still don't know if this currently works as expected...

Edit

It doesn't. The resolve is created in the main.js: https://github.com/xkjyeah/vue-google-maps/blob/7c699caf9ee1dc2022599ca6d8c29d02c25b960b/src/main.js#L98

So the code above throws vueGoogleMapsInit is not a function.

[MrToxy]

Even if the Google Map Script isn't loaded, the vue2-google-maps components get into the main.js which hits the landing page SEO score of every single website that uses this package.

The real solution here is component based:

import GmapMap from 'vue2-google-maps/src/components/map'
import GmapMarker from 'vue2-google-maps/src/components/marker'
import { loadGmapApi } from 'vue2-google-maps'

export default {
  created () {
    loadGmapApi({ key: 'foobar', /* ... */ })
  }
  // ...
}

So it can be used only on the pages REALLY used.

Still don't know if this currently works as expected...

Edit

It doesn't. The resolve is created in the main.js:

https://github.com/xkjyeah/vue-google-maps/blob/7c699caf9ee1dc2022599ca6d8c29d02c25b960b/src/main.js#L98

So the code above throws vueGoogleMapsInit is not a function.

this would definitely be a valid approach and a good one