Easy To Use Vue.js Autocomplete For The Google Place API


Category: Vue.js Vue.js Form | July 29, 2021
Author: olefirenko
Official Page: Go to website
Last Update: July 29, 2021
License: MIT

vuejs google autocomplete

Description:

You might be creating a store locator or a page, where you want your customer can search something with entering the place then, you are at the right place. Here, we are sharing with you Vue.js autocomplete for the Google Place API. Which will enable your users to fill the location in search box easily with auto-suggest feature of the Google Place API.

How to use it?

1. You will need to install the component with npm or yarn.

#npm
npm install vue-google-autocomplete --save

#yarn
yarn add vue-google-autocomplete

2. Then, you have to include the Google Maps Places API in the <head> of your HTML. Please change the API key with your own.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&libraries=places"></script>

3. Import the required component in your project.

import VueGoogleAutocomplete from 'vue-google-autocomplete';

4. Now, use below syntax in your template file.

<vue-google-autocomplete
    id="map"
    classname="form-control"
    placeholder="Start typing"
    v-on:placechanged="getAddressData"
>
</vue-google-autocomplete>

Now, you are done. 🙂