Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gocanto/google-autocomplete
Google Autocomplete Vue Component
https://github.com/gocanto/google-autocomplete
components google google-autocomplete javascript vuejs
Last synced: 20 days ago
JSON representation
Google Autocomplete Vue Component
- Host: GitHub
- URL: https://github.com/gocanto/google-autocomplete
- Owner: gocanto
- License: mit
- Created: 2016-07-01T17:31:57.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-04-17T07:59:32.000Z (over 1 year ago)
- Last Synced: 2024-10-30T08:16:27.837Z (about 1 month ago)
- Topics: components, google, google-autocomplete, javascript, vuejs
- Language: JavaScript
- Homepage: https://gocanto.github.io/google-autocomplete
- Size: 1.06 MB
- Stars: 278
- Watchers: 14
- Forks: 47
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-vuejs - google-autocomplete ★9
- awesome-vue-refactor - google-autocomplete ★9
README
# Google Autocomplete
I am sharing this component because I was overwhelmed by complicated examples to achieve this simple job. So, I will try to be as simple as I can during my explanation.
Google Autocomplete component is no more than a ```Vue.js``` wrapper around the official Google Places API. In spite of the demo written in ```Vue.js```, the Autocomplete object can be pulled in from any ***JS framework***.
# Requirements
You will have to install Vue & Vuemit:
```js
npm install vue --save
```
```js
npm install vuemit --save
```
The Vuemit library is used to manage the events between the google component and its parent one.
***Note:*** If you happen to be using ```Vue 1.*```, you will have to pull from the vue-1 branch.
# Demo
View live demo.
# Installation
To install this package you just need to open your console and type ```npm i google-autocomplete-vue --save```. If there are any problems during the installation, you can try again using the ```force``` param: ```npm i -f google-autocomplete-vue --save```
## Getting started
***First of all***, you have to sign up on ***Google API Console*** to get your API key:
https://console.developers.google.com
Once this has been done, you will have to copy the ***API KEY given by google*** and paste it in your JS file entry point. Example:
- Bootstrap File: bootstrap.js. You will have to ***require Vuemit*** in this file to have the events handler set globaly. As so: Example
- Entry point file: demo.js
> **Note:** Important keys have to be kept within an .env file, so be aware of this while pushing your code to your git control.
***Second of all***, you will have to import the component in your application entry point, so you can call it globally when needed. Example:
```js
import GoogleAutocomplete from 'google-autocomplete-vue';
```
## Validation on server side
Places validation is a ***laravel library*** that will help you out to handle your user addresses. Its aim is making sure addresses submitted by users are valid through 3rd party services, as google.
Take a look at its repository: Places Validation
# Guide
* First of all, you have to create an entry point to compile the component and generate your bundle file. An example is available here.
* Second of all, you will have to create your vue object to control the component:
```javascript
require('./bootstrap');
new Vue({
el: '#demo',
data:
{
output: {}, address: {}, sent: false, response: {}, config: {}
},
mounted()
{
//Set an event listener for 'setAddress'.
Vuemit.listen('setAddress', this.onAddressChanged);
Vuemit.listen('addressWasCleared', this.onAddressCleared);
},
methods:
{
/**
* Submit the data to be evaluated.
*
* @return {Void}
*/
submit()
{
this.sent = true;
this.output = this.address;
this.address = {};
},
/**
* Checks whether the output data is valid.
*
* @return {Bool}
*/
isValid()
{
return Object.keys(this.output).length > 0;
},
/**
* Checks whether the output data is not valid.
*
* @return {Bool}
*/
isNotValid()
{
return ! this.isValid();
},
/**
* The callback fired when the autocomplete address change event is fired.
*
* @param {Object}
* @return {Void}
*/
onAddressChanged(payload)
{
if (Object.keys(paypload.place).length > 0) {
this.address = payload.address;
this.response = payload.response;
}
}
/**
* The callback fired when the autocomplete clear event is fired.
*
* @param {Object}
* @return {Void}
*/
onAddressCleared()
{
this.address = {};
this.response = {};
}
}
});
```
See the example here.
* Third of all, you have to compile these two files with **browserify**, **webpack** or **laravel-elixir-vue-2** to make them readable for every browser. Example:
```javascript
require('laravel-elixir-vue-2');
var elixir = require('laravel-elixir');
elixir.config.sourcemaps = false;
elixir.config.assetsPath = 'src';
elixir(function(mix)
{
mix.webpack('demo.js', 'dist/demo.js');
});
```
See the example here
* Finally, you can use the component in your **HTML** file using this syntax:
```HTML
```
***:config*** is the config passed to the Autocomplete constructor of the places API. See the documentation. Config corresponds to the `options` argument in the doc.
See the example here.
Also, you can pass any ```css class``` through the "class" prop.
# Contributing
Please feel free to fork this package and contribute by submitting a pull request to enhance the functionalities.
# License
The MIT License (MIT). Please see [License File](LICENSE.md) for more information.
# How can I thank you?
Why not star the github repo? Share the link for this repository on Twitter? Spread the word!
Don't forget to [follow me on twitter](https://twitter.com/gocanto)!
Thanks!
Gustavo Ocanto.
[email protected]