Vue Google Places Autocomplete

Install

import VueGooglePlaces from 'vue-google-places'
Vue.use(VueGooglePlaces)

This module will load all needed google librarys automatically at first usage

Use

  <VueGooglePlaces
    :api-key="apiKey"
    types="(cities)"
    country="ua"
    placeholder="Input your place"
    @placechanged="onPlaceChanged"
    @noresult="onNoResult"
  />

Props

| name | type | default | description | |------|------|---------|-------------| |apiKey| String | - | Google api key | |enableGeolocation| Boolean | false | component will ask user geolocation | |enableGeocode| Boolean | false | conponent will automatically find user place by his geolocation. This depends of enableGeolocation property| |version| String | - | version of google maps api| |types|String, Array| - |Google places types See google docs (Table 3)

Available types:

• geocode
• address
• establishment
• (regions)
• (cities)

Events

• placechanged: Place - when user has selected new place
• input: String - name of selected place
• noresult: Place - when place has changed but details was not found

Slots

• default - in this slot you can put your own input component

Other frameworks

This component implemented in such frameworks:

Vuetify

  import { VuetifyGooglePlaces } from 'vue-google-places'

  <VuetifyGooglePlaces
    :api-key="apiKey"
    types="(cities)"
    country="us"
    placeholder="Input your place"
    @placechanged="onPlaceChanged"
  />

To implement this module in other frameworks - welcome to contribute! Please use VuetifyGooglePlaces as template

Implementation with own input component

To use with own input component use default slot. VueGooglePlaces will automatically find html input element

  import { VueGooglePlaces } from 'vue-google-places'

  <VueGooglePlaces
    :api-key="apiKey"
    class="subheading"
    :enable-geolocation="true"
    types="(cities)"
    country="us"
    @placechanged="getAddressData"
  >
    <MyInput
      icon="search"
      :value="value"
      :placeholder="$t('Your place')"
      ...
    />
  </VueGooglePlaces>