Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
vue-google-places-api
Advanced tools
Readme
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
npm install vue-google-places-api
yarn add vue-google-places-api
Note: if you want a specific preconfigured component, skit this step and import it as a simple component (see pre-configured section)
import Vue from 'vue'
import CustomGoogleAutocomplete from 'vue-google-places-api'
...
Vue.use(CustomGoogleAutocomplete)
<template>
<custom-google-autocomplete :options="options" @select="selected = $event)")
<div slot-scope="{ inputAttrs, inputEvents, loading, results, query, selectPrediction, hasResults }">
<input type="search" v-bind="inputAttrs" v-on="inputEvents" />
<div v-for="(prediction, index) in results" :key="'prediction-' + index" @click="selectPrediction(prediction)">
{{ prediction.description }}
</div>
</div>
</custom-google-autocomplete>
</template>
<script>
export default {
data() {
return {
selected: null
}
}
}
</script>
Name | Type | Default | Description |
---|---|---|---|
options | Object | see options section | Plugin options (see options section) |
You can also pass all props available on an input (placeholder, name..)
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 | false | 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 :
params = {
location: `${lat},${lng}`,
radius: 1000,
language: 'fr'
}
See Optional parameters section for more informations
@select event is triggered when a prediction is selected. It send an object with datas about the location
In order to be more flexbile, you are able to make your own results template with slot-scope
.
props = {
inputAttrs: Object,
inputEvents: Object,
query: String,
results: Array,
loading: Boolean,
selectPrediction: Function,
hasResults: Boolean
}
<template>
<bulma-dropdown(:options="options" @select="selected = $event") placeholder="Search"/>
</template>
<script>
import { BulmaDropdown } from 'vue-google-places-api'
export default {
components: {
BulmaDropdown
},
data() {
return {
selected: null,
options: {
apiKey: process.env.VUE_APP_PLACE_API_KEY,
deepSearch: true,
cors: true,
focus: false,
params: {
location: '43.3,5.4',
radius: 1000,
language: 'fr'
}
}
}
}
}
</script>
To customize loading text and no results text, two slots are availables : loading
and empty
.
Input is binded with $attrs
<template>
<bootstrap-dropdown(:options="options" @select="selected = $event") name="input-name"/>
</template>
<script>
import { BootstrapDropdown } from 'vue-google-places-api'
export default {
components: {
BootstrapDropdown
},
data() {
return {
selected: null,
options: any = {
apiKey: process.env.VUE_APP_PLACE_API_KEY,
deepSearch: true,
cors: true,
focus: false,
params: {
location: '45.52345,-122.67621',
radius: 1000,
language: 'en'
}
}
}
}
}
</script>
To customize loading text and no results text, two slots are availables : loading
and empty
.
Input is binded with $attrs
FAQs
Custom your Google Autocomplete search
The npm package vue-google-places-api receives a total of 2 weekly downloads. As such, vue-google-places-api popularity was classified as not popular.
We found that vue-google-places-api demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.