{"id":14281,"library":"vue-google-autocomplete","title":"Vue Google Autocomplete Component","description":"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.","status":"active","version":"1.1.4","language":"javascript","source_language":"en","source_url":"https://github.com/olefirenko/vue-google-autocomplete","tags":["javascript","vue","google","autocomplete"],"install":[{"cmd":"npm install vue-google-autocomplete","lang":"bash","label":"npm"},{"cmd":"yarn add vue-google-autocomplete","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-google-autocomplete","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for the Vue.js framework.","package":"vue","optional":false}],"imports":[{"note":"Primarily designed for ESM environments, but can be bundled. CJS `require` might work with transpilers but is less idiomatic for Vue components.","wrong":"const VueGoogleAutocomplete = require('vue-google-autocomplete');","symbol":"VueGoogleAutocomplete","correct":"import VueGoogleAutocomplete from 'vue-google-autocomplete';"},{"note":"Common global registration pattern for Vue 2 components.","symbol":"Component registration (global)","correct":"import Vue from 'vue';\nimport VueGoogleAutocomplete from 'vue-google-autocomplete';\nVue.component('vue-google-autocomplete', VueGoogleAutocomplete);"},{"note":"Standard local component registration within a Vue component.","symbol":"Component registration (local)","correct":"import VueGoogleAutocomplete from 'vue-google-autocomplete';\nexport default {\n components: { VueGoogleAutocomplete }\n // ...\n}"}],"quickstart":{"code":"\n\n\n\n\n","lang":"javascript","description":"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."},"warnings":[{"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.","message":"Google 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.","severity":"breaking","affected_versions":">=1.1.2"},{"fix":"Add `` to your `index.html` file, replacing `YOUR_API_KEY_HERE` with a valid API key from Google Cloud Console.","message":"The Google Maps JavaScript API script MUST be included in your HTML `` section with `key` and `libraries=places` parameters for the component to function correctly. This is not handled by the component itself.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"Google 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.","severity":"gotcha","affected_versions":">=1.1.1"},{"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.","message":"Failure 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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"search_vec":"'1.1.4':66 '2':11 'ad':82 'adapt':72 'addit':58 'address':28,54,130 'aim':26 'api':24,75,111,134 'autocomplet':3,7,40,143 'autosuggest':16 'beyond':101 'captur':131 'chang':76 'common':29 'compon':4,13,35,55 'comprehens':49 'control':85 'current':62 'data':51,79 'depend':100 'deprec':78 'detail':129 'differenti':123 'direct':47 'disabl':90 'e.g':77 'eas':125 'effici':133 'explicit':137 'extern':98 'featur':83 'fetch':48,86 'field':80,88,138 'focus':70 'found':31 'function':17 'geocod':59 'geoloc':50 'googl':2,6,21,74,108,142 'head':120 'html':119 'input':41,92 'integr':127 'javascript':99,110,140 'latitud':52 'like':84 'limit':30 'load':115 'longitud':53 'map':22,109 'multipl':39 'must':113 'packag':94 'page':45 'place':23 'placeresult':87 'power':18 'primari':122 'provid':15 'recent':68 'reli':104 'request':60 'requir':57 'select':139 'separ':116 'similar':34 'singl':44 'sole':105 'stabl':63 'support':38 'updat':69 'usag':135 'version':64 'vue':1,5,102,141 'vue.js':10 'without':56 'x':12","created_at":"2026-04-20T01:58:53.723609+00:00","updated_at":"2026-04-20T01:58:53.723609+00:00","problems":[{"fix":"Ensure your Google Maps API script tag in `index.html` looks like this: ``. Double-check your API key and ensure it's correctly enabled in Google Cloud Console.","cause":"The `libraries=places` parameter is missing or misspelled in the Google Maps API script tag, or the API key is invalid/missing.","error":"Google Maps JavaScript API error: AutocompleteService.INVALID_REQUEST"},{"fix":"Make sure the Google Maps API script tag is placed in the `` 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.","cause":"The Google Maps JavaScript API script has not loaded before your Vue application tries to initialize the `vue-google-autocomplete` component.","error":"Uncaught ReferenceError: google is not defined"},{"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'.","cause":"The 'Google Places API Web Service' is not enabled in your Google Cloud project.","error":"Error: You must enable the 'Places API' in the Google Cloud Console for this project."}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/olefirenko/vue-google-autocomplete","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vue-google-autocomplete","openapi_spec":null,"status_page":null,"smithery":null,"categories":["gcp"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}

Address Lookup

Selected Address: