Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork6
🗺️ Use Algolia Places with Vuetify
License
Kocal/vuetify-algolia-places
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
UseAlgolia Places with Vuetify.
A demo is availablehere.
Run in your terminal:
yarn add vuetify-algolia-places
You also need to installalgoliasearch andplaces.js:
yarn add'algoliasearch@^3''places.js@^1'
Then install the plugin:
importVuefrom'vue';importVuetifyAlgoliaPlacesfrom'vuetify-algolia-places';Vue.use(VuetifyAlgoliaPlaces,{algolia:{appId:'...',// OptionalapiKey:'...',// Optional},});
Vuetify Algolia Places is still under development, so for now there is no way to specify props nor events.
<vuetify-algolia-placesv-model="place" />
The variableplace looks like this:
{"name":"30 Rue du Sergent Michel Berthet","administrative":"Auvergne-Rhône-Alpes","city":"Lyon 9e Arrondissement","country":"France","countryCode":"fr","type":"address","latlng": {"lat":45.7704,"lng":4.80536 },"postcode":"69009","highlight": {"name":"<em>30</em> <em>Rue</em> <em>du</em> <em>Sergent</em> <em>Michel</em> <em>Be</em>rthet","city":"Lyon 9e Arrondissement","administrative":"Auvergne-Rhône-Alpes","country":"France" },"hitIndex":0,"query":"30 rue du sergent michel berthet","value":"30 Rue du Sergent Michel Berthet, Lyon 9e Arrondissement, Auvergne-Rhône-Alpes, France"}If you don't store this kind of object in your application, you can still pass a plain string that is equivalent to the valuevalue, e.g.:30 Rue du Sergent Michel Berthet, Lyon.
If this value is notnull during the initialization of the component, it will automatically request Algolia API and use the first hit.
That means ifplace is equal to30 Rue du Sergent Michel Berthet, Lyon, it will be automatically transformed to the above JSON object.
| Name | Type | Algolia Places documentation |
|---|---|---|
type | String | Checktype option |
language | String | Checklanguage option |
countries | String[] | Checkcountries option |
aroundLatLng | String | CheckaroundLatLng option |
aroundLatLngViaIp | Boolean | CheckaroundLatLngViaIP option |
aroundRadius | Number | CheckaroundRadius option |
debounce | Number|Boolean | Passtrue to debounce for 250ms, or pass a custom delay. Default:false |
custom-highlight | Function | SeeCustom Highlighting |
Every props fromVuetify Autocomplete component are supported, exceptitems,loading,search-input.sync,filter andreturn-object that are used internally.
| Name | Description | Arguments |
|---|---|---|
input | Emitted when the user select a place | @input="onInput",onInput(place) { } |
error | Emitted when there is an error with Algolia API | @error="onError",onError(error) { } |
clear | Emitted when the user click on theclear button (used with propclearable) | @clear="onClear",onClear() { } |
You can override the default behavior of highlighted search query hits via a custom function and/or slot. When using both, the returned value of your custom highlight function will become thehighlight prop in the slot. Read more about Algolia Places highlight objecthere.
<vuetify-algolia-places :custom-highlight="someFunction" />Note that this slot's parent element is a<v-list-tile-content>
<vuetify-algolia-places> <template slot="highlight" slot-scope="{ highlight }"> <v-list-tile-title>{{ highlight }}</v-list-tile-title> </template></vuetify-algolia-places>About
🗺️ Use Algolia Places with Vuetify
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Sponsor this project
Uh oh!
There was an error while loading.Please reload this page.
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors6
Uh oh!
There was an error while loading.Please reload this page.