Build Google Maps Typeahead Functionality with Vue.js and Laravel 5.3

What we’ll be building!

In my last post we created a Laravel 5.3 application and added authentication. In this tutorial we are going to add Google Maps API typeahead functionality for selecting addresses.

In this app, we want users to be able to see places as they type. For this we’ll GuillaumeLeclerc/vue-google-maps component, specifically the placesInput component.

$ npm i vue-google-maps --save

Rename resources/assets/js/components/Example.vue to resources/assets/js/components/LocationInput.vue. In that file we will create our custom Vue component.

<template>
<place-input
            :place.sync="placeInput.place"
            :types.sync="placeInput.types"
            :component-restrictions.sync="placeInput.restrictions"
            class='form-control'
    ></place-input>
<pre>{{ placeInput.place | json }}</pre>
</template>
<script>
    import { PlaceInput, Map } from 'vue-google-maps'
    export default {
       data() {
            return {
                placeInput: {
                    place: {
                        name: ''
                    },
                    types: [],
                    restrictions: {'country': 'usa'}…