This package will let you use google places API to autocomplete a existing address form

Overview

google-places-autocomplete

This package will let you use google places API to autocomplete a existing address form

Usage

const Vue = require('vue')
const googleAutocompleteDirective = require('google-places-autocomplete');

// TODO: DEMONSTRATE API
Vue.use(GooglePlacesAutoComplete, {
  key: process.env.GOOGLE_API_KEY
})

Default directive use

">
<template>
  <section class="shipping-form">
    <form
      action="#"
      novalidate
      @submit.prevent="submit"
      v-google-places-autocomplete >
      <div class="input-group addressLine">
        <label for="addressLine">{{ $t('shipping-form.labels.addressLine') }}label>
        <input
          type="text" 
          name="addressLine"
          id="addressLine"
          v-model="address.addressLine" >
      div>
      <div class="input-group addressLine2">
        <label for="addressLine2">{{ $t('shipping-form.labels.addressLine2') }}label>
        <input type="text" name="addressLine2" id="addressLine2" v-model="address.addressLine2" >
      div>
      <div class="input-group country">
        <label for="country">{{ $t('shipping-form.labels.country') }}label>
        <country-selector
          :name="'country'"
          :id="'country'"
          v-model="address.country.code" />
      div> <div class="input-group state"> <label for="state">{{ $t('shipping-form.labels.state') }}label> <state-selector :country="address.country.code" :name="'state'" :id="'state'" v-model="address.state.code" /> div> <div class="input-group city"> <label for="city">{{ $t('shipping-form.labels.city') }}label> <input type="text" name="city" id="city" v-model="address.city" /> div> <div class="input-group postal"> <label for="postal">{{ $t('shipping-form.labels.postal.' + postalCodeKey) }}label> <input type="text" name="postal" id="postal" v-model="address.postal" > div> <div class="input-group phone"> <label for="phone">{{ $t('shipping-form.labels.phone') }}label> <input type="tel" name="phone" id="phone" v-model="phone"> div> <div class="shipping-form__actions group-actions"> <ub-button buttonType="primary" buttonSize="" :actionName="submitText" :disabled="disableButton" :buttonLoading="loading"> ub-button> <ub-button buttonType="secondary" buttonSize="" :actionName="$t('cancel')" :disabled="loading" :onClick="cancel"> ub-button> div> form> section> template>
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

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

A Vue2 plugin for input content suggestions, support using keyboard to navigate and quick pick, it make use experience like search engine input element
A Vue2 plugin for input content suggestions, support using keyboard to navigate and quick pick, it make use experience like search engine input element

v-suggest A Vue2 plugin for input content suggestions, support using keyboard to navigate and quick pick, it make use experience like search engine in

Search places and address using Google Maps API
Search places and address using Google Maps API

Vue-Gmaps Search address and places using Google Maps API Buy me a cofffe please :) https://buymeacoff.ee/ridermansb Installation npm i -S vue-gmaps A

📍 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-

Click to show input text box Vue Component ... inspired by Trello. This is my first time publishing Vue Component via npm package and let me know if you encounter any issues, bugs, or improvement. Thanks!

label-edit Click to show input text box Vue Component ... inspired by Trello. This is my first time publishing Vue Component via npm package and let m

PWA Responsive CRUD Application - Register, login in your existing account or sign in with Google

PWA Responsive CRUD Application - Register, login in your existing account or sign in with Google. After you login you can: Add new Events, Edit Events, List Events and Delete Events from the front-end also from Firebase. You can check the demo on the link below!

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

Vue Google Autocomplete A Vue.js (2.x) autosuggest component for the Google Maps Places API. Demo Live demo: olefirenko.github.io/vue-google-autocompl

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

vue-google-api - A wrapper for easy integration of the Google's APIs client in any vue.js 2 project, based on promises, with built-in Oauth2 "Sign In with Google" facilities.

vue-google-api This project is outdated and no longer maintained, I can't find time to do what should be done here. Really sorry, if someone wants to

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).

Vue Component that lets you drop it into your existing project and get the benefits of Facebook Login quickly.
Vue Component that lets you drop it into your existing project and get the benefits of Facebook Login quickly.

Vue Component that lets you drop it into your existing project and get the benefits of Facebook Login quickly.

A simple weather app build with laravel, vuejs, algolia places api and open-weather api
A simple weather app build with laravel, vuejs, algolia places api and open-weather api

A simple weather app build with laravel, vuejs, algolia places api and open-weather api

 A complete starter kit that allows you create amazing apps that look native thanks to the Quasar Framework. Powered by an API developed in Laravel Framework using the easy GraphQL queries language. And ready to use the Google Firebase features.
A Vue.js address form component for Bedrock Web apps

A Vue.js address form component for Bedrock Web apps

Vue 3 component that let you embed tweets in your App by only giving the tweet id

vue-tweet Vue 3 component that let you embed tweets in your App by only giving the tweet id This project was developed using Vue 3 + Typescript + Vite

A VueJS runtime to let you write command line UI in Vue
A VueJS runtime to let you write command line UI in Vue

blessed-vue Compile against VueJS 2.5.13. This package is a Vue.js runtime for blessed and now blessed-contrib. The current version is compiled agains

Owner
Sergio Marin
Sergio Marin
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