A Vuetify ready Vue.js (2.x) autosuggest component for the Google Maps Places API.

Overview

Vuetify Google Autocomplete

A Vuetify ready Vue.js (2.x) autosuggest component for the Google Maps Places API.

Build Status

Versions

Latest Beta: 2.0.0-beta.8

Latest Stable: 2.0.1

See releases for details.

Thanks

Huge thanks and credit goes to @olefirenko and contributors for creating Vue Google Autocomplete from which this Vuetify ready version was inspired.

Demo

Live Interactive demo: madimetjashika.github.io/vuetify-google-autocomplete

Installation

The easiest way to use Vuetify Google Autocomplete is to install it from npm or yarn.

npm i vuetify-google-autocomplete

Or

yarn add vuetify-google-autocomplete

For version >= 2.0.0-alpha.2

Within your main.js or Vue entry point, import and initialise the component.

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

Vue.use(VuetifyGoogleAutocomplete, {
  apiKey: '...', // Can also be an object. E.g, for Google Maps Premium API, pass `{ client: 
   
     }`
   
  version: '...', // Optional
  language: '...', // Optional
  installComponents: true, // Optional (default: true) - false, if you want to locally install components
  vueGoogleMapsCompatibility: false, // Optional (default: false) - true, requires vue2-google-maps to be configured see https://github.com/xkjyeah/vue-google-maps
});

For use with vue2-google-maps

import Vue from 'vue';
import * as VueGoogleMaps from 'vue2-google-maps';
import VuetifyGoogleAutocomplete from 'vuetify-google-autocomplete';

// @see https://www.npmjs.com/package/vue2-google-maps
Vue.use(VueGoogleMaps, {
    load: {
        key: 'xxxxxxxxs',
        // This is required to use the Autocomplete plugin
        libraries: 'places', // 'places,drawing,visualization'
    },
});

Vue.use(VuetifyGoogleAutocomplete, {
    /*
      not used as loaded with component
      apiKey: key,
    */
    vueGoogleMapsCompatibility: true,
});

For version <= 1.1.0

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 of your 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.

Usage and API

For version >= 2.0.0-alpha.1

Simply start using the component in your HTML.

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

For version <= 1.1.0

The Vuetify Google Autocomplete works out of the box by just including it.

import VuetifyGoogleAutocomplete from 'vuetify-google-autocomplete'

In your template you can use this syntax:

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

Properties

Please refer to the following for a list of all the properties supported by this library:

Events

The component emits the following events, which you can listen in your application:

placechanged

Gets triggered when the address data got obtained. This data is available on the returned objects:

  • street_number, route, locality, administrative_area_level_1, country, postal_code, latitude, longitude.
  • place - PlaceResult object is available as second parameter.

no-results-found

Gets triggered when a user entered the name of a Place that was not suggested and pressed the Enter key, or the Place Details request failed.

Pleae refer to Vuetify text field events for all vuetify supported events.

Exposed component functions

These functions are accessible by setting "ref" on the component (Refs documentation). See example below how to use these functions.

clear()

Call to clear the value of the user input.

focus()

Call focus to focus on the element

blur()

Call blur to blur (unfocus) the element

update(value)

Call to update the user input with a new value

Example

Please note that you need to provide the method that will listen (v-on:placechanged) to for an event when the address data is obtained. In the example below, the method is getAddressData.

">
<template>
    <div>
        <h2>Your Addressh2>
        <vuetify-google-autocomplete
            ref="address"
            id="map"
            classname="form-control"
            placeholder="Please type your address"
            v-on:placechanged="getAddressData"
            country="sg"
        >
        vuetify-google-autocomplete>
    div>
template>

<script>
    export default {
        data: function () {
            return {
              address: ''
            }
        },
        mounted() {
            // To demonstrate functionality of exposed component functions
            // Here we make focus on the user input
            this.$refs.address.focus();
        },
        methods: {
            /**
            * When the location found
            * @param {Object} addressData Data of the found location
            * @param {Object} placeResultData PlaceResult object
            * @param {String} id Input container ID
            */
            getAddressData: function (addressData, placeResultData, id) {
                this.address = addressData;
            }
        }
    }
script>

Exposed component slots

The slots available are proxied v-text-field slots.

append

Adds an item inside the input and after input content. (Note in underlying v-text-field this slot overrides append-icon prop.)

append-outer

Adds an item inside the input and after input content. (Note in underlying v-text-field this slot overrides append-outer-icon prop.)

label

Replaces the default label

prepend

Adds an item outside the input and before input content. (Note in underlying v-text-field this slot overrides prepend-icon prop.)

prepend-inner

Adds an item inside the input and before input content. (Note in underlying v-text-field this slot overrides prepend-inner-icon prop.)

progress

Slot for custom progress linear (displayed when loading prop is not equal to Boolean False)

Example

Use slots as you would any other component. Example below uses append which uses a component rather than the append-icon props (note: this defers slot behaviour back to the v-text-field implementation).

">
<template>
    <div>
        <h2>Your Addressh2>
        <vuetify-google-autocomplete
            ref="address"
            id="map"
            classname="form-control"
            placeholder="Please type your address"
            v-on:placechanged="getAddressData"
            country="sg"
        >
            <template #append>
                
                <my-btn/>
            template>
        vuetify-google-autocomplete>
    div>
template>

Contributing

Let's make this an awesome vuetify component! Collaborations and contributions are welcome!

Contribution Guidlines

Have a read through the Contributor Code of Conduct. Pretty standard, nothing hectic.

Fork, then clone the repo:

git clone [email protected]:your-username/vuetify-google-autocomplete.git

Install dependencies with npm

npm install

or yarn

yarn

Make your changes, and observe them at dev-time by running

npm run dev

and going to the displayed URL to see your changes.

Then, ensure tests are written for your changes. Ensure that your changes pass all the tests:

npm run test

Ensure that your changes are documented via JSDocs standard, then run

npm run docs

to update the JSDocs.

If relevant, please ensure that you update the README and demo/example accordingly.

Push to your fork and submit a pull request.

If all is well, your changes will be merged timeously!

Feel free to also post issues for bug fixes or enhancements or anything.

Roadmap

I'm planning on updating this library to support the most latest version of vuetify during the month of December 2019. This would include potentially having this library as a vue cli 3.* supported plugin.

If you've got any requests, please post them via issues and i'll look into them.

PS - I am looking for people to help me maintain this library. The demand has grown since creation and unfortunately i'm unable to support it regularly at an acceptable rate. If you're keen, please drop me a mail me at [email protected].

You might also like...
Vue 2 Component to make Autocomplete element.
Vue 2 Component to make Autocomplete element.

Vue 2 Autocomplete Autocomplete component for Vue 2. This is a fork of vue2-autocomplete - Naufal Rabbani [email protected] Install You can imp

A Vue Autocomplete component with accessibility and simplicity in mind.

VueCompleter A Vue Autocomplete component with accessibility and simplicity in mind. Installation npm install vue-completer or yarn add vue-completer

vue autoComplete component

vueto-complete vue autoComplete component Index Features Installation Examples Props Slots Events Styling LICENSE Features Supports full control over

Autocomplete - Accessible autocomplete component for vanilla JavaScript and Vue
Autocomplete - Accessible autocomplete component for vanilla JavaScript and Vue

Autocomplete Accessible autocomplete component for vanilla JavaScript and Vue. Demo Take a look at the documentation page, and the Codepen examples. F

A simple tag component with typeahead
A simple tag component with typeahead

v-tag-suggestion A simple tag component with typeahead ⌨️ Install via npm npm install vue-tag-suggestion Import and register where you want to use imp

Vue3-simple-typeahead - A simple and lightweight Vue3 typeahead component that show a suggested list of elements while the user types in.
Vue3-simple-typeahead - A simple and lightweight Vue3 typeahead component that show a suggested list of elements while the user types in.

vue3-simple-typeahead A Vue3 component for a simple typeahead component. It will show a list of suggested items based on the user input. The component

vue instant allows you to easily create custom search controls with auto suggestions for your vue 2 applications
vue instant allows you to easily create custom search controls with auto suggestions for your vue 2 applications

Vue Instant! vue instant allows you to easily create custom search controls with auto suggestions for your vue 2 applications. Table of contents Examp

🧱 Very Downshift like autocomplete solution for Vue

Vue Combo Blocks 🧱 Provides all the building blocks needed for accessible autocomplete, combobox, or typeahead component. A very Downshift like autoc

Swapi - vue-3 front for SWAPI

swapi Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Lints and

A simple modular Vuejs component that autosuggest input from a dyanamic or static data querying.

v-autosuggest A simple modular Vuejs component that autosuggest input from a dyanamic or static data querying. Table of contents Installation Usage Pr

soraino 9 Nov 24, 2022
Google Autocomplete Vue Componet

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

Gustavo Ocanto 275 Aug 29, 2022
Autocomplete component for Vue.js

v-autocomplete Autocomplete component for Vue.js This component is css-free. The idea is to be used with any framework. Installation Using yarn yarn a

Marcos 347 Jan 3, 2023
Autocomplete component for Vue js

vuejs-auto-complete A Vue autocomplete component npm install vuejs-auto-complete --save Usage Installation, add autocomplete component into your app i

Charlie Kassel 136 Nov 8, 2022
Feature-rich autocomplete component for Vue.js

vue-simple-suggest Simple yet feature-rich autocomplete component for Vue.js Install npm install --save vue-simple-suggest See installation guide for

Marketplace Technologies 442 Jan 4, 2023
An autocomplete/typeahead component for Vue 2 and Bootstrap 4

vue-bootstrap-typeahead A simple list-group based typeahead/autocomplete using Bootstrap 4 and Vue 2 View The Examples Installation From NPM: > npm i

Alex Urquhart 209 Nov 19, 2022
A Vue component for autocomplete email domains

vue-email-dropdown A Vue component for autocomplete email domains Features Allows passing a list of domains to be used in for the suggestions. Allows

Danny Feliz 27 Nov 24, 2022
Autocomplete Component for Vue.Js

vue-autocomplete Autocomplete Component for Vue.Js Intro Vue Autocomplete is a Vue.Js component to make some suggestions for user input. come with .vu

Naufal Rabbani 210 Jan 18, 2022
A configurable & lightweight Vue wrapper component that enables

A configurable & lightweight Vue wrapper component that enables "out of the box" email autocomplete/suggestions on input elements.

James Wylie 28 Jul 19, 2022
Mention component for Vue.js

vue-mention Mention popper for input and textarea Documentation Sponsors Quick start <script> import { Mentionable } from 'vue-mention' const users =

Guillaume Chau 462 Dec 22, 2022