I am sharing this component because I was overwhelmed of complicated examples to achieve this simple duty. So, I will try to be as easier as I can during my explanation.
You will have to install vue & vuex
npm install vuenpm install vuexThe vuex library is used to manage the event between the component and the current vue instance.
To install this package you just need to open your console line and type npm i google-autocomplete-vue. If there is a problem during the installation, you can try again using the force param, as so npm i -f google-autocomplete-vue
First of all, you have to sign up in Google API Console in order for you to configure your app information, as API key, app name, etc. This can be addressed on https://console.developers.google.com. Once this has been done, you will have to copy the API KEY given by google and paste in your JS file entry point. Example:
-
Bootstrap File: https://github.com/gocanto/google-autocomplete/blob/development/src/js/bootstrap.js
-
Entry point file: https://github.com/gocanto/google-autocomplete/blob/development/src/js/index.js#L8
Note: Remind, 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 will be able to call it as global when need it. Example:
import GoogleAutocomplete from 'google-autocomplete-vue';Third of all, you will have to import the store file shipped with the component, in order for it to exposes its event out of it. Example
import Store from 'google-autocomplete-vue/dist/Store';Take a look at the example published.
Places validation is a laravel library that will help you out to handle your user addresses. Its aim is making sure the addresses submitted by users are valid through 3rd party services, as google.
Take a look at its repository on Places Validation
Also, you will be able to see the online DEMO
-
First of all, you have to create an entry point in order for you to compile the component out and generate your bundle file. An illustration is posted here
-
Second of all, you will have to create your vue object to control the component mentioned, as so:
import Vue from 'vue';
import Store from 'google-autocomplete-vue/dist/Store';
import Components from 'google-autocomplete-vue';
new Vue({
el: '#demo',
data:
{
output: {}, address: {}, sent: false
},
computed:
{
sharedAddress: function()
{
return Store.state.sharedAddress;
}
},
watch: {
sharedAddress: function ()
{
this.address = this.sharedAddress;
}
},
methods:
{
submit: function ()
{
this.sent = true;
this.output = this.address;
this.address = {};
},
isValid: function ()
{
return Object.keys(this.output).length > 0;
},
isNotValid: function ()
{
return ! this.isValid();
}
}
});See the example here
- Third of all, you have to compile these two files with browserify or webpack and laravel-elixir-vue-2 to make them readable for every browser. Example:
require('laravel-elixir-vue-2');
var elixir = require('laravel-elixir');
elixir.config.sourcemaps = false;
elixir.config.assetsPath = 'src';
elixir(function(mix)
{
mix.webpack('index.js', 'dist/demo.js');
});See the example here
- Finally, you can use the component in your HTML file using this syntax:
<google-autocomplete
class = "input"
placeholder = "type your address"
>
</google-autocomplete>See the example here
Also, You can pass any css class through "class" prop.
Please feel free to fork this package and contribute by submitting a pull request to enhance the functionalities.
The MIT License (MIT). Please see License File for more information.
Why not star the github repo? I'd love the attention! Why not share the link for this repository on Twitter? Spread the word!
Don't forget to follow me on twitter!
Thanks!
Gustavo Ocanto. [email protected]