Home > Mobile >  vue3-google-map with Nuxt
vue3-google-map with Nuxt

Time:01-09

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:

CodePudding user response:

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.

  • Related