How can I use vue3-google-map with Nuxt 3 ?

In plugins folder vue-google-maps.ts file

import { defineNuxtPlugin } from "#app";

import VueGoogleMaps from "vue3-google-map";

export default defineNuxtPlugin((nuxtApp) => {
   const config = useRuntimeConfig();
   nuxtApp.vueApp.use(VueGoogleMaps as any, {
      load: {
         key: config.googleApi,
         libraries: "places",
      },
   });
});

In nuxt.config.ts

export default defineNuxtConfig({
   compatibilityDate: "2024-04-03",
   devtools: { enabled: false },
   css: ["~/assets/css/main.css"],
   runtimeConfig: {
      googleApi: process.env.GOOGLE_API_KEY, 
   },
   plugins: ["@/plugins/vue-google-maps"],
});

In my component

<template>
    <GoogleMap :api-key="config.googleApi" style="width: 100%; height: 500px" :center="center" :zoom="15">
        <Marker :options="{ position: center }" />
    </GoogleMap>
</template>

<script setup lang="ts">
import { GoogleMap, Marker } from 'vue3-google-map'
const config = useRuntimeConfig();
const center = { lat: 35, lng: -95 }
</script>

inocan-group / vue3-google-map

How can I use vue3-google-map with Nuxt 3 ? #272