How to use in nuxt3

[w5966qzh]

I tried to use vue-google-maps in nuxt3.

plugins/vueGoogleMaps.ts

import VueGoogleMaps from '@fawmi/vue-google-maps'

export default defineNuxtPlugin((app) => {
    app.vueApp.use(VueGoogleMaps, {
        load: {
          key: "my-api-key",
          language:'ja'
        }
      });
});

But it doesn't work.

When I open map page, the message below show;

[vite dev] Error loading external "/Users/myName/Desktop/nuxt-vuetify-sample/node_modules/@fawmi/vue-google-maps/src/utils/env.js".

Could you show how to use in nuxt3?

[Baroshem]

Same for me. Would really like to have this error sorted so that I could use your lib in my project :)

[grunghi]

I've created a PR with a fix for nuxt3, see https://github.com/fawmi/vue-google-maps/pull/116

[blackspike]

Hi folks, thanks for this. I can't get it working following those nuxt 3 instructions, either locally or in this sandbox

Locally it seems to not render the component, my browser html shows <gmapmap center="[object Object]" zoom="7" map-type-id="terrain" style="width: 500px; height: 300px;" data-v-2a183b29=""></gmapmap>

and my console says :

[Vue warn]: Failed to resolve component: GMapMap
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

[BapRx]

Hi, I got it working with the following configuration (@fawmi/vue-google-maps": "^0.9.72):

nuxt/nuxt.config.ts

export default defineNuxtConfig({
  build: { transpile: ["@fawmi/vue-google-maps"] },
  runtimeConfig: {
    public: { GOOGLE_MAPS_API_KEY: process.env.GOOGLE_MAPS_API_KEY },
  },
})

nuxt/plugins/vueGoogleMaps.ts

import VueGoogleMaps from "@fawmi/vue-google-maps"

export default defineNuxtPlugin((nuxtApp) => {
  const config = useRuntimeConfig().public
  nuxtApp.vueApp.use(VueGoogleMaps, {
    load: {
      key: config.GOOGLE_MAPS_API_KEY,
    },
  })
})

nuxt/pages/example.vue

<template>
[...]
      <div class="mb-20">
        <GMapMap
          :center="center"
          :zoom="15"
          :options="{
            zoomControl: true,
            mapTypeControl: false,
            scaleControl: false,
            streetViewControl: false,
            rotateControl: false,
            fullscreenControl: true,
          }"
          style="width: 500px; height: 300px; margin: auto"
        >
          <GMapMarker
            :key="index"
            v-for="(marker, index) in markers"
            :position="marker.position"
            :clickable="true"
            :draggable="true"
            @click="openMarker(marker.id)"
          >
            <GMapInfoWindow
              :closeclick="true"
              @closeclick="openMarker(null)"
              :opened="openedMarkerID === marker.id"
            >
              <div>{{ marker.description }}</div>
            </GMapInfoWindow>
          </GMapMarker>
        </GMapMap>
      </div>
[...]
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      openedMarkerID: null,
      center: { lat: 48.8773406, lng: 2.327774 },
      markers: [
        {
          description: "Google France",
          id: "1",
          position: {
            lat: 48.8773406,
            lng: 2.327774,
          },
        },
      ],
    }
  },
}
</script>

[blackspike]

That worked for me thank you so much!

[Phyllon]

It imports style sheets from google fonts, which violates the EU's GDPR privacy act. Has anyone figured out, if self-hosting the respective fonts will prevent the module from downloading fonts?

[franek8080]

Anyone having: Uncaught SyntaxError: ambiguous indirect export: default ?? Error disappears when I comment out all GMapCluster instances in /src/main.js. Hopefully this helps. Running Nuxt 3.0.0 with Vite 3.2.5

[michgeek]

Anyone having: Uncaught SyntaxError: ambiguous indirect export: default ?? Error disappears when I comment out all GMapCluster instances in /src/main.js. Hopefully this helps. Running Nuxt 3.0.0 with Vite 3.2.5

I got away with importing the main file directly :

import VueGoogleMaps from '@fawmi/vue-google-maps/src/main.js';

...

[SilvioRamirez]

I got away with importing the main file directly : import VueGoogleMaps from '@fawmi/vue-google-maps/src/main.js';

Same here, not working for me. Running fawmi/vue-google-maps: 0.9.79, vue: 3.2.47, vite: 4.1.4

[SilvioRamirez]

I got away with importing the main file directly : import VueGoogleMaps from '@fawmi/vue-google-maps/src/main.js';

Same here, not working for me. Running fawmi/vue-google-maps: 0.9.79, vue: 3.2.47, vite: 4.1.4

npm WARN deprecated @googlemaps/markerclustererplus@1.2.10: It is recommended to use @googlemaps/markerclusterer instead of this package.

the problem is in this package, in the last version of vue-google-maps it is updated to "markclusterer", i roll back to: last vue-google-maps: 0.9.72, delete my package-lock.json file, and npm install again.

[OffCrazyFreak]

Hi, I got it working with the following configuration (@fawmi/vue-google-maps": "^0.9.72):

nuxt/nuxt.config.ts

export default defineNuxtConfig({
  build: { transpile: ["@fawmi/vue-google-maps"] },
  runtimeConfig: {
    public: { GOOGLE_MAPS_API_KEY: process.env.GOOGLE_MAPS_API_KEY },
  },
})

nuxt/plugins/vueGoogleMaps.ts

import VueGoogleMaps from "@fawmi/vue-google-maps"

export default defineNuxtPlugin((nuxtApp) => {
  const config = useRuntimeConfig().public
  nuxtApp.vueApp.use(VueGoogleMaps, {
    load: {
      key: config.GOOGLE_MAPS_API_KEY,
    },
  })
})

nuxt/pages/example.vue

<template>
[...]
      <div class="mb-20">
        <GMapMap
          :center="center"
          :zoom="15"
          :options="{
            zoomControl: true,
            mapTypeControl: false,
            scaleControl: false,
            streetViewControl: false,
            rotateControl: false,
            fullscreenControl: true,
          }"
          style="width: 500px; height: 300px; margin: auto"
        >
          <GMapMarker
            :key="index"
            v-for="(marker, index) in markers"
            :position="marker.position"
            :clickable="true"
            :draggable="true"
            @click="openMarker(marker.id)"
          >
            <GMapInfoWindow
              :closeclick="true"
              @closeclick="openMarker(null)"
              :opened="openedMarkerID === marker.id"
            >
              <div>{{ marker.description }}</div>
            </GMapInfoWindow>
          </GMapMarker>
        </GMapMap>
      </div>
[...]
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      openedMarkerID: null,
      center: { lat: 48.8773406, lng: 2.327774 },
      markers: [
        {
          description: "Google France",
          id: "1",
          position: {
            lat: 48.8773406,
            lng: 2.327774,
          },
        },
      ],
    }
  },
}
</script>

I tried the newest version, but it's still broken. Manually set to use "@fawmi/vue-google-maps": "0.9.72" and managed to get it working with the example given above. Don't forget to add your api key to your .env :)