How to use in nuxt3

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?

[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>

[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?