vue-custom-google-autocomplete

Installation

You need Vue.js version 2.0+ and an Google PLACE API key. This plugin is a renderless component. It comes without any css as the main goal is to use it with differents frameworks.

If you looking for framework oriented components, you can import them separately (see pre-configured section)
PR are welcome for other components

$3

``bash
npm install vue-custom-google-autocomplete
yarn add vue-custom-google-autocomplete
`

$3

Note: if you want a specific preconfigured component, skit this step and import it as a simple component (see pre-configured section)

`javascript
import Vue from 'vue'
import CustomGoogleAutocomplete from 'vue-custom-google-autocomplete'

...

Vue.use(CustomGoogleAutocomplete)
`

`vue

`

Props

| Name | Type | Default | Description |
|---------------|---------|-------------------------------------------------|--------------------------------------------------------|
| options | Object | see options section | Plugin options (see options section) |
| value | String | null | Input value (can be use with v-model) |

You can also pass all props available on an input (placeholder, name..)

Options

`javascript
options = {
apiKey: YOUR_API_KEY,
deepSearch: true,
cors: false,
params: {},
focus: false
}
`

| Name | Type | Default | Description |
|----------------------|---------|------------------------------|------------------------------------------------------------------------|
| apiKey | String | null | Your Google PLACE Api key (REQUIRED) |
| deepSearch | Boolean | true | Get more informations about selected place (geometry etc..) |
| cors | Boolean | false | Set to true when project is running locally |
| params | Object | {} | Google Autocomplete optional parameters |
| focus | Boolean | false | Focus input |
| debounceTime | Number | 400 | Time in ms before trigger a new Google api call |

Params object is useful to refine predictions, for example if you want to get first predictions near to a location within a radius distance in a certain language you can set params like this :

`javascript
params = {
location: ${lat},${lng},
radius: 1000,
language: 'fr'
}
`
See Optional parameters section for more informations

Events

@select event is triggered when a prediction is selected. It send an object with datas about the location

Template and slot-scope

In order to be more flexbile, you are able to make your own results template with slot-scope.

`javascript
props = {
inputAttrs: Object,
inputEvents: Object,
query: String,
results: Array,
loading: Boolean,
selectPrediction: Function,
hasResults: Boolean
}
`

Pre-configured Components

$3

`vue



`

To customize loading text and no results text, two slots are availables : loading and empty.
Input is binded with $attrs

$3

`vue



`

To customize loading text and no results text, two slots are availables : loading and empty.
Input is binded with $attrs`