vue3-google-map with Nuxt

I've already used this vue3-google-map plugin in some Vue projects but now I'm working on a Nuxt project and I want to use this here as well. Is there any way to add it to Nuxt?

Here is the documentation:

From what I can find, this library doesn't support use as a global 'plugin' within Nuxt 3.

Most of the working examples I could find, and the approach we're using in our project, do the following:

1. Install the plugin within your Nuxt app using whichever package manager you use.
2. Skip adding the plugin in ~/plugins/
3. Import the map components within your components or templates using:

import { GoogleMap, Marker, etc } from 'vue3-google-map'

Note: The approach suggested by Jakub, whilst being valid for many such dependencies, did not work for us with vue3-google-map. Jabub's answer is a working method for fawmi/vue-google-maps which has been tweaked slightly from here

You should be able to use the vue3-google-map plugin in a Nuxt project.

1. Install the plugin with terminal:

   npm install vue3-google-map
   

2. Create a new file called vue-google-maps.js in the plugins directory of your Nuxt project.

3. In the vue-google-maps.js file, import the vue3-google-map plugin and add it to the Nuxt plugins array:

   import Vue from 'vue';
   import VueGoogleMaps from 'vue3-google-maps';
   
   Vue.use(VueGoogleMaps, {
     load: {
       key: 'YOUR_API_KEY',
       libraries: 'places',
     },
   });
   

4. In your Nuxt configuration file (nuxt.config.js), add the vue-google-maps.js file to the plugins array:

   export default {
     // ...
     plugins: [
       // ...
       '@/plugins/vue-google-maps',
     ],
     // ...
   }
   

5. In your Vue component, you can now use the <GmapMap> component provided by the vue3-google-map plugin to display a Google Map.