Vuetify Google Autocomplete

Overview

Vuetify Google Autocomplete

A Vuetify ready Vue.js (2.x) autosuggest component for the Google Maps Places API. This is a fork of https://github.com/MadimetjaShika/vuetify-google-autocomplete that includes the ability to set a place search boundary.

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 autoComplete component

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

A simple tags input with typeahead (autocomplete) built with Vue.js 2.
A simple tags input with typeahead (autocomplete) built with Vue.js 2.

Vue Tags Input v4 Forked from voerro/vue-tagsinput A simple tags input with typeahead built with Vue.js 2. Installation via NPM npm i @seriouslag/vue-

A simple tags input with typeahead (autocomplete) built with Vue.js 2.
A simple tags input with typeahead (autocomplete) built with Vue.js 2.

Voerro Vue Tags Input v2 A simple tags input with typeahead built with Vue.js 2. Live Demo Installation via NPM npm i @voerro/vue-tagsinput --save-dev

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

Google Autocomplete Vue Componet
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

๐Ÿ” Google Place Autocomplete Search - Renderless component + Wrappers for Bulma, Bootstrap and more...
๐Ÿ” Google Place Autocomplete Search - Renderless component + Wrappers for Bulma, Bootstrap and more...

vue-custom-google-autocomplete Installation You need Vue.js version 2.0+ and an Google PLACE API key. This plugin is a renderless component. It comes

๐Ÿ“ Vue composable for Google Maps Places Autocomplete.

v-use-places-autocomplete ๐Ÿ“ Vue composable for Google Maps Places Autocomplete. Though not a fork, this composable is fully inspired by react-google-

Nova Google AutoComplete Field Package

This field allows you to work with Google Places API to autocomplete on user input and get the full real address with all the metadata (like latitude and longitude).

A dashboard for Google Wi-Fi, using the google-wifi-api-node wrapper.

google-wifi-dashboard A dashboard for Google Wi-Fi, using the google-wifi-api-node wrapper. Check it out here: wifi.jameshawkins.dev Requirements You'

Google-onetap-signin-client-vue - Vue 3 Demo of using the Google One-Tap Signin in a modular way (Client Code)

vue-google-onetap-signin Project setup npm install Compiles and hot-reloads for

A Vuetify ready Vue.js autosuggest component for the Google Places API.

Vuetify Google Autocomplete A Vuetify ready Vue.js (2.x) autosuggest component for the Google Maps Places API. Versions Latest Beta: 2.0.0-beta.8 Late

A work-in-progress Google like login example using vuetify

Vuetify Material Auth A work-in-progress Google like auth example using vuetify Introduction This project is a simple demonstration of how to create a

Vue - Boilerplate Front : Vuetify, Vuex, Vuetify, JWT, Jest (Beta)

Vue - Boilerplate Front : Vuetify, Vuex, Vuetify, JWT, Jest (Beta)

Vuetify editor. Component simplifies integration tiptap editor with vuetify.
Vuetify editor. Component simplifies integration tiptap editor with vuetify.

WYSIWYG editor for Vuetify. The editor is based on tiptap and uses vuetify's components. ๐Ÿ’ช If you have Vuetify 1.x (not 2.x), then you can find docs

Vuetify Material Dashboard is a beautiful resource built over Vuetify, Vuex and Vuejs.
Vuetify Material Dashboard is a beautiful resource built over Vuetify, Vuex and Vuejs.

Vuetify Material Dashboard is a beautiful resource built over Vuetify, Vuex and Vuejs.

์‚ฌ์šฉ์ž ๊ฒŒ์‹œํŒ(FE)Vuetify Material Dashboard is a beautiful resource built over Vuetify, Vuex and Vuejs.
์‚ฌ์šฉ์ž ๊ฒŒ์‹œํŒ(FE)Vuetify Material Dashboard is a beautiful resource built over Vuetify, Vuex and Vuejs.

Vuetify Material Dashboard Vuetify Material Dashboard is a beautiful resource built over Vuetify, Vuex and Vuejs. It will help you get started develop

Vuetify-Projects - Here I am developing my Vuetify projects to learn.

vue-project Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Lin

Vuetify Material Dashboard Free - A beautiful resource built over Vuetify, Vuex and Vuejs
Vuetify Material Dashboard Free - A beautiful resource built over Vuetify, Vuex and Vuejs

Vuetify Material Dashboard Free - A beautiful resource built over Vuetify, Vuex and Vuejs

:eight_pointed_black_star: Vue.js simple autocomplete dropdown component

vue-simple-search-dropdown A Vue component for a simple searchable dropdown. No external library is used in this dropdown. Demo Demo here: https://rom

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
๐Ÿงฑ 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

Simeon Kerkola 17 Jul 7, 2022
A better vim plugin for stylus, including proper and up-to-date syntax highligting, indentation and autocomplete

Vim Stylus Vim + Stylus = fast, effective and convenient CSS workflow! Features All HTML5 tags and CSS3 props are covered Correct highlighting for int

Ilia Loginov 48 Dec 28, 2022
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

Eduardo Aguad 0 Oct 12, 2017
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

Tom Elliott 3 Nov 8, 2020