1.0.1 • Published 6 years ago

vuetify-algolia-places v1.0.1

Weekly downloads
124
License
MIT
Repository
github
Last release
6 years ago

Vuetify Algolia Places

Use Algolia Places with Vuetify.

Travis VueJS 2.x npm license

Demo

A demo is available here.

Installation

Run in your terminal:

yarn add vuetify-algolia-places

You also need to install algoliasearch and places.js:

yarn add 'algoliasearch@^3' 'places.js@^1'

Then install the plugin:

import Vue from 'vue';
import VuetifyAlgoliaPlaces from 'vuetify-algolia-places';

Vue.use(VuetifyAlgoliaPlaces, {
  algolia: {
    appId: '...', // Optional
    apiKey: '...', // Optional
  },
});

Usage

Vuetify Algolia Places is still under development, so for now there is no way to specify props nor events.

<vuetify-algolia-places v-model="place" />

The variable place 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"
}
Note about initial value

If you don't store this kind of object in your application, you can still pass a plain string that is equivalent to the value value, e.g.: 30 Rue du Sergent Michel Berthet, Lyon.

If this value is not null during the initialization of the component, it will automatically request Algolia API and use the first hit.

That means if place is equal to 30 Rue du Sergent Michel Berthet, Lyon, it will be automatically transformed to the above JSON object.

Props

NameTypeAlgolia Places documentation
type StringCheck type option
languageStringCheck language option
countriesString[]Check countries option
aroundLatLngStringCheck aroundLatLng option
aroundLatLngViaIpBooleanCheck aroundLatLngViaIP option
aroundRadiusNumberCheck aroundRadius option
debounceNumber|BooleanPass true to debounce for 250ms, or pass a custom delay. Default: false
custom-highlightFunctionSee Custom Highlighting

Every props from Vuetify Autocomplete component are supported, except items, loading, search-input.sync, filter and return-object that are used internally.

Events

NameDescriptionArguments
inputEmitted when the user select a place@input="onInput", onInput(place) { }
errorEmitted when there is an error with Algolia API @error="onError", onError(error) { }
clear Emitted when the user click on the clear button (used with prop clearable)@clear="onClear", onClear() { }

Custom highlighting

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 the highlight prop in the slot. Read more about Algolia Places highlight object here.

Via function

<vuetify-algolia-places :custom-highlight="someFunction" />

Via slot

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>
1.0.1

6 years ago

1.0.0

6 years ago

1.0.0-beta.3

6 years ago

1.0.0-beta.2

6 years ago

1.0.0-beta.1

6 years ago

1.0.0-alpha.5

7 years ago

1.0.0-alpha.4

7 years ago

1.0.0-alpha.3

7 years ago

1.0.0-alpha.2-2

7 years ago

1.0.0-alpha.2-1

7 years ago

1.0.0-alpha.2

7 years ago

1.0.0-alpha.1

7 years ago

1.0.0-alpha.0

7 years ago