Skip to content
This repository has been archived by the owner on Apr 6, 2023. It is now read-only.

Latest commit

 

History

History
110 lines (90 loc) · 2.89 KB

README.md

File metadata and controls

110 lines (90 loc) · 2.89 KB

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>