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>