vue3-google-map with Nuxt

Question

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:

Answer 1

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.