npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-geo-suggest

v1.0.2

Published

Renderless Vue component for finding addresses using Google Places API

Downloads

1,672

Readme

vue-geo-suggest

GitHub open issues Npm version MIT License Build Status Coverage Status

A small, renderless Vue component for finding addresses using Google Places API. The component simply provides a list of suggestions and place information as slot props in order to support custom UI and reduce size (2K gzipped). It is easily pluggable to Vuetify and other UI components.

This project was originally based on react-geosuggest and vue-google-maps.

Installation

npm install vue-geo-suggest
yarn add vue-geo-suggest

Apart from that, an API key is necessary for using Google Places. From the Google Developer Console's API Manager Dashboard, enable the following APIs:

Generate an API key and provide it to loadGmaps utility.

The component and utilities can be imported directly:

import { GeoSuggest, loadGmaps } from 'vue-geo-suggest'

loadGmaps('my-api-key')
Vue.component(GeoSuggest.name, GeoSuggest) // Or register locally where needed

Or used as a plugin:

import GeoSuggest from 'vue-geo-suggest'

Vue.use(GeoSuggest, { apiKey: 'my-api-key' })

Usage

<GeoSuggest
  :search="searchInput"
  :suggestion="selectedSuggestion"
  @geocoded="address = $event.normalizedAddress"
>
  <template v-slot="{ suggestions, loading }">
    <CustomSearchInput
      v-model="searchInput"
    />
    <CustomSuggestDropdown
      v-model="selectedSuggestion"
      :items="suggestions"
      :loading="loading"
    />
  </template>
</GeoSuggest>
import { GeoSuggest, loadGmaps } from 'vue-geo-suggest'

export default {
  components: { GeoSuggest },
  data() {
    return {
      searchInput: '', // Search text
      selectedSuggestion: null, // Selected suggest from dropdown
      address: null, // Information about the selected place
    }
  },
  mounted() {
    // Load API dependencies globally. This can be called any time
    // before using GeoSuggest component.
    // i.e. in `main.js` or directly in the view where is necessary.
    loadGmaps('my-api-key')
  },
}

Example with Vuetify:

<GeoSuggest
  v-slot="{ suggestions, loading }"
  :search="searchInput"
  :suggestion="selectedSuggestion"
  @geocoded="address = $event.normalizedAddress"
>
  <VCombobox
    v-model="selectedSuggestion"
    :search-input.sync="searchInput"
    :loading="loading"
    :items="suggestions"
    item-text="description"
    no-filter
    clearable
  />
</GeoSuggest>

API

geo-suggest

props

  • search String (optional)

    Search string to filter places. A list of place suggestions with basic details will be provided based on this text. Example: "400 Broadway".

  • min-length Number (optional) default: 3

    Minimum length of the search string to trigger a request.

  • suggestion Object (optional)

    Selected suggestion among all the provided values to show extended details about the place. This prop must be one of the elements inside the provided suggestions list. Contains description, placeId, and matchedSubstrings.

  • debounce Function (optional)

    Called whenever the search prop changes with another function as a single parameter that performs the actual request. Useful for debouncing requests with a custom query delay. Works directly with lodash.debounce: :debounce="fn => lodashDebounce(fn, msDelay)"

  • types Array (optional)

    Filter suggestions by type. See types supported.

  • location Object (optional)

    Allows localizing the resulting suggestions. See google.maps.LatLng.

  • radius Number (optional)

    Radius in meters that defines the valid area around the provided location. Must be used with location prop.

  • bounds Object (optional)

    Bounds for biasing the suggestions. location and radius are ignored when using this. See LatLngBounds.

  • country String|Array (optional)

    Restricts predictions to the specified countries (ISO 3166-1 Alpha-2 country code, case insensitive) Example: 'es'; ['it', 'fr'].

  • place-detail-fields Array (optional)

    List of fields that should be returned by Google Places API. Useful to reduce the size of the response and optimize billing. All the fields are returned by default.

  • google-maps Object|Function (optional)

    Google Maps object to use in case it is not loaded globally.

data

  • loading

    true when a request to Google Places API is pending. This is provided in the default scoped slot.

  • suggestions

    List of suggestions returned by Google Places API based on search. Each element is an object containing description, placeId and matchedSubstrings. This is provided in the default scoped slot.

events

  • suggestions

    Fired when a new list of suggestions is returned by the Google Places API.

    arguments:

    • suggestions Array - List of suggestions.
  • error

    Fired when Google Places API fails.

    arguments:

    • payload.status Object - The status returned.
  • geocoded

    Fired when the selected suggestion is geocoded and all its details are available.

    arguments:

    • payload.description String - Same description string as in the suggestions list.
    • payload.location Object - Latitude (lat) and longitude (lng).
    • payload.gmaps Object - Complete response for this suggestion. See its structure here.
    • payload.addressComponentsMap Object - Handy structure that summarizes gmaps components.
    • payload.normalizedAddress Object - Extended information based on the API result useful for shipping addresses.

Project setup for contributing

yarn # Installs dependencies
yarn dev # Compiles and hot-reloads for development
yarn build # Compiles and minifies for production
yarn lint # Lints and fixes files
yarn test:unit # Run tests
yarn doc:build # Update the API section of README.md