Registry / gcp / vue-google-autocomplete

vue-google-autocomplete

library1.1.4jsnpmunverified

Vue Google Autocomplete is a Vue.js 2.x component that provides autosuggest functionality powered by the Google Maps Places API. It aims to address common limitations found in other similar components, such as supporting multiple autocomplete inputs on a single page and directly fetching comprehensive geolocation data (latitude, longitude, address components) without requiring additional geocoding requests. The current stable version is 1.1.4, with recent updates focusing on adapting to Google API changes (e.g., deprecated data fields) and adding features like controlling fetched PlaceResult fields and disabling the input. The package does not have external JavaScript dependencies beyond Vue itself, relying solely on the Google Maps JavaScript API which must be loaded separately in the HTML head. Its primary differentiation is ease of integration for detailed address capture and efficient API usage through explicit field selection.

gcp

npm install vue-google-autocomplete

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-GOOGLE-AUTOCOM

vue-google-autocomplete

gcpjavascriptv1.1.4

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueGoogleAutocomplete

✓ import VueGoogleAutocomplete from 'vue-google-autocomplete';

✗ const VueGoogleAutocomplete = require('vue-google-autocomplete');

Primarily designed for ESM environments, but can be bundled. CJS `require` might work with transpilers but is less idiomatic for Vue components.

Component registration (global)

✓ import Vue from 'vue'; import VueGoogleAutocomplete from 'vue-google-autocomplete'; Vue.component('vue-google-autocomplete', VueGoogleAutocomplete);

Common global registration pattern for Vue 2 components.

Component registration (local)

✓ import VueGoogleAutocomplete from 'vue-google-autocomplete'; export default { components: { VueGoogleAutocomplete } // ... }

Standard local component registration within a Vue component.

This example demonstrates basic usage of `vue-google-autocomplete`, including how to register the component, bind properties, listen for the `placechanged` event, and display the returned address data. It highlights the `id`, `classname`, `placeholder`, `country`, `types`, and `fields` props for customization and API cost optimization, along with a simple data display.

<template> <div> <h1>Address Lookup</h1> <p>Start typing an address in the input below:</p> <vue-google-autocomplete id="address-input" classname="my-custom-input" placeholder="Enter your address here" country="us" v-on:placechanged="getAddressData" :types="['address']" :fields="['geometry', 'address_components', 'formatted_address', 'place_id']" > </vue-google-autocomplete> <div v-if="address"> <h2>Selected Address:</h2> <p><strong>Formatted Address:</strong> {{ address.formatted_address }}</p> <p><strong>Latitude:</strong> {{ address.latitude }}</p> <p><strong>Longitude:</strong> {{ address.longitude }}</p> <p><strong>City:</strong> {{ address.locality }}</p> <p><strong>State:</strong> {{ address.administrative_area_level_1 }}</p> </div> </div> </template> <script> import VueGoogleAutocomplete from 'vue-google-autocomplete'; export default { components: { VueGoogleAutocomplete }, data() { return { address: null }; }, methods: { getAddressData: function (addressData, placeResult) { console.log('Address Data:', addressData); console.log('Place Result:', placeResult); this.address = addressData; } } }; </script>

Debug

Known issues

breakingGoogle Maps Places API regularly updates its data fields and deprecates old ones. Version 1.1.2 explicitly addressed changes in deprecated data fields to ensure continued functionality.

fix

Ensure you are on the latest patch version (1.1.4 or newer) to benefit from these fixes. If you encounter unexpected data fields or missing information, consult the Google Places API documentation and update your component.

affects: >=1.1.2

gotchaThe Google Maps JavaScript API script MUST be included in your HTML `<head>` section with `key` and `libraries=places` parameters for the component to function correctly. This is not handled by the component itself.

fix

Add `<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&libraries=places"></script>` to your `index.html` file, replacing `YOUR_API_KEY_HERE` with a valid API key from Google Cloud Console.

affects: >=1.0.0

gotchaGoogle Places API charges for data fields returned. By default, the API returns all available fields, which can lead to higher costs. This component allows specifying which fields to fetch.

fix

Utilize the `fields` prop to explicitly list only the `PlaceResult` data fields you require. Example: `:fields="['geometry', 'address_components', 'formatted_address']"`. Refer to Google Places API documentation for available fields.

affects: >=1.1.1

gotchaFailure to enable the necessary Google Cloud APIs (Google Maps Geocoding API, Google Places API Web Service, and Google Maps JavaScript API) will result in the autocomplete functionality not working, often with console errors related to API permissions.

fix

Visit the Google Developer Console, navigate to your project, and ensure that 'Google Maps Geocoding API', 'Google Places API Web Service', and 'Google Maps JavaScript API' are all enabled for your project.

affects: >=1.0.0

Errors

Common errors & fixes

Google Maps JavaScript API error: AutocompleteService.INVALID_REQUEST

The `libraries=places` parameter is missing or misspelled in the Google Maps API script tag, or the API key is invalid/missing.

fix

Ensure your Google Maps API script tag in `index.html` looks like this: `<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&libraries=places"></script>`. Double-check your API key and ensure it's correctly enabled in Google Cloud Console.

Uncaught ReferenceError: google is not defined

The Google Maps JavaScript API script has not loaded before your Vue application tries to initialize the `vue-google-autocomplete` component.

fix

Make sure the Google Maps API script tag is placed in the `<head>` section of your `index.html` *before* your main application script. Alternatively, you might need to use a deferred loading mechanism for the Google script if it's dynamically added.

Error: You must enable the 'Places API' in the Google Cloud Console for this project.

The 'Google Places API Web Service' is not enabled in your Google Cloud project.

fix

Go to the Google Cloud Console, navigate to your project, then to 'APIs & Services' -> 'Enabled APIs & services', and enable 'Google Places API Web Service'.

Upgrade

Version history

1.1.4latest on npm

Audit

Dependencies

vuerequiredPeer dependency for the Vue.js framework.

Agent activity

46 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/olefirenko/vue-google-autocomplete ↗

packagehttps://www.npmjs.com/package/vue-google-autocomplete ↗