2.0.0-Beta.1

What's New

• Updated Vuetify (1.0.18) and Vue (2.5.16) dependency versions.

What's Fixed

• Resolves issue noted in #42, where the value prop would not be updated as expected.

2.0.0-Alpha.9

What's Fixed

• Resolves issue noted in #29, which made it impossible to use this library alongside another library that needed to load the Google SDK.

What's New

• The "placechanged" event now gets triggered when clearing the input - #37.

Thanks to @gabaum10 for the contributions!

2.0.0-Alpha.8

What's Fixed

• This should resolve nuxt issues noted in #30

2.0.0-Alpha.7

What's Fixed

• This should resolve routing reload issue noted in #26

2.0.0-Alpha.6

What's Fixed

• This should resolve #26

ToDo

Re-write the test for this component.

v2.0.0-alpha.5

What's New

• Resolves issue forcing component to require v-model prop.

Follows on updates from v2.0.0-alpha.4 release .

v2.0.0-alpha.4

What's New

• Project now exported as ES5. This enables usage in plain HTML/JS projects without the need for any ES6 to ES5 loaders or Vue specific loaders.
• Component can now be used multiple times on the same page or project.
• Component now supports loading enterprise Google API properties (and any other properties of choice).
• Component now support Vuetify v1.0.3 and all associated props.
• #23 - Support for Hint prop added.

Notable Usage Changes

In your main.js or Vue entry point, import and initialise the project like so

import Vue from 'vue';
import VuetifyGoogleAutocomplete from 'vuetify-google-autocomplete';

Vue.use(VuetifyGoogleAutocomplete, {
  apiKey: '....', // or as an object
  version: '...', // Optional
});

Then simply use the component in your HTML. No need to re-import it in every component where you wish to use the it.

NB: You will need to have a v-model prop for this release. This is a breaking change noted thanks to @mwargan, and should be resolved in the next release. As a work-around until then, you will need to include a v-model prop for the component.

What's Fixed

• #12, #19, #22 - The component will react to any v-model passed to it.
• #16 - By only importing the library once (and therefore initialising Google API once), this problem should not occur. However, if there are any other components (apart from this one) using Google Maps on the same project/page, this issue might re-occur. TODO - find a solution for this.
• #17 - Default value now set to match Vuetify defaults..
• #20 - Prop now works as expected.

ToDo

• Thoroughly test this release.

v2.0.0-alpha.1

This release converts the project from being written in vue specific language and terms to being written in vanilla JS. The big change was moving the lib from a .vue file to a .js file, and thereby replacing the template with a render function instead.

NB: From a usage perspective, not much has changed with this release, i.e. the docs for v1.* can still be used. Although it has not been fully regression tested.

What's New

• There's no longer a need to initialise the Google Places SDK by importing the script within the head tag of your html. You can now simply pass the key as a prop to the component. e.g.

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

+ <vuetify-google-autocomplete :google-api-key="yourGoogleApiKey"></vuetify-google-autocomplete>

Along with this, you can also specify further props to the components:

:google-api-version - Defaults to '3', but you may specify any version you wish.

:load-google-api - If your app already loads the google places SDK, you can set this to false to tell this library not to re-load the SDK (reloading may cause problems). If an SDK has already been loaded, the library will locate and use that instead.

What's Fixed

• #15 - Fixed by allowing the component to self-load the SDK on demand, i.e. point 1 above.
• #14 - The country prop is now reactive and will update the SDK when changed.
• #13 - The types prop is now reactive and will update the SDK when changed.
• A bug noted with the enable-geolocation prop where the component would keep asking permissions. The component will react properly to the prop and only ask once, unless reset.
• The library should now be usable with plain html/js projects without requiring any fancy loaders/parsers.

ToDo

• Document this release.
• Regression test this release.

v1.1.0

This release marks the last of the 1.* releases. Although working okay, it has several shortfalls which prompted the release of 2.*. This release supports Vuetify version 0.16.9.

Installation and Usage

npm i vuetify-google-autocomplete

This component uses Google Maps Places API to get geo suggests for autocompletion, so you have to include the Google Maps Places API in the <head> of your HTML:

<!DOCTYPE html>
  <html>
  <head>
    …
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&libraries=places"></script>
  </head>
  <body>
    …
  </body>
</html>

To obtain API key please visit the Google Developer Console. The API's that you have to enable in your Google API Manager Dashboard are Google Maps Geocoding API, Google Places API Web Service and Google Maps Javascript API.

Then, in your JS

import VuetifyGoogleAutocomplete from 'vuetify-google-autocomplete'

In your template you can use this syntax:

<vuetify-google-autocomplete
    id="map"
    append-icon="search"
    disabled="true"
    classname="form-control"
    placeholder="Start typing"
    v-on:placechanged="getAddressData"
>
</vuetify-google-autocomplete>