Socket
Socket
Sign inDemoInstall

vue-google-places-api

Package Overview
Dependencies
315
Maintainers
1
Versions
1
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-google-places-api

Custom your Google Autocomplete search


Version published
Maintainers
1
0

Weekly downloads

Readme

Source

vue-google-places-api

Custom Google Autcomplete using Place API

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

Install via npm

npm install vue-google-places-api
yarn add vue-google-places-api

Import and use

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>

Props

NameTypeDefaultDescription
optionsObjectsee options sectionPlugin options (see options section)

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

Options

options = {
  apiKey: YOUR_API_KEY,
  deepSearch: true,
  cors: false,
  params: {},
  focus: false
}
NameTypeDefaultDescription
apiKeyStringnullYour Google PLACE Api key (REQUIRED)
deepSearchBooleanfalseGet more informations about selected place (geometry etc..)
corsBooleanfalseSet to true when project is running locally
paramsObject{}Google Autocomplete optional parameters
focusBooleanfalseFocus input
debounceTimeNumber400Time 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

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.

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

Pre-configured Components

Bulma dropdown markup.

Custom Google Autcomplete Example with Bulma Dropdown
<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

Bootstrap dropdown.

Custom Google Autcomplete Example with Bootstrap Dropdown
<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

Keywords

FAQs

Last updated on 28 May 2021

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc