[Vuejs]-How can i add google auto complete seach input in nuxt3?

by

3👍

✅

After long research I found the below solution working for me in the nuxt3 stable version.

Install the following version (0.9.72) of @fawmi/vue-google-maps

your package.json file:

"dependencies": {
    "@fawmi/vue-google-maps": "0.9.72",
}

in nuxt.config.ts add following lines

build: {
    transpile: ["@fawmi/vue-google-maps"],
},

Then create folder named plugins and make a file inside it named vueGoogleMaps.ts

📦plugins
 ┗ 📜vueGoogleMaps.ts

Your vueGoogleMaps.ts file:

import { defineNuxtPlugin } from "#app";
import VueGoogleMaps from "@fawmi/vue-google-maps";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueGoogleMaps, {
    load: {
      key: "Your-key",
      libraries: "places", // This is required if you use the Autocomplete plugin
    },
    autobindAllEvents: true,
  });
});

then in example.vue:

<template>
  <GMapAutocomplete
       placeholder="This is a placeholder"
       @place_changed="setPlace"
    >
  </GMapAutocomplete>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
    }
  },
  methods: {
    setPlace() {
    }
  }
}
</script>
👤M Atif Mehmood

Leave a comment