vue2-lob-address-autocomplete

Address Autocomplete component for Vue powered by Lob

Features

This is a very lightweight Vue component that uses the Lob Autocomplete API in order to simplify the process of adding in a search autocomplete bar. Check out the Autocomplete API on Postman or Lob Documentation

Demo

Demo Code

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <Autocomplete APIKEY={{YOURAPIKEYHERE}} 
                  @selectedLocation="logSelectedResult($event)" />
  </div>
</template>

<script>
import Autocomplete from './components/Autocomplete'

export default {
  name: 'app',
  components: {
    Autocomplete
  },
  methods: {
    logSelectedResult(location) {
      console.log(location)
    }
  }
}
</script>

Install

npm install --save vue-lob-address-autocomplete

Getting API Keys

Head to Lob.com and create your account. Head to the dashboard and click on Address Verification Getting Started to find your API keys. It's reccomended to use your publishable Live key for front end components.

Usage

APIKEY

Add in the API Key you retrieved from the Lob Dashboard and plug it in as an APIKEY prop.

SelectedLocation Event

After adding in your API key the only only prop you need is a function to handle the selection process when a user chooses a location. Autocomplete will emit a location which can be caught like using any method.

@selectedLocation="method($event)"

Location object

When handling a SelectedLocation event, an object will be returned with the following schema:

{
   "location": {
      "primary_line": "185 BAYSIDE VILLAGE PL",
      "city": "SAN FRANCISCO",
      "state": "CA",
      "zip_code": "94107"
   },
   "label": "185 BAYSIDE VILLAGE PL SAN FRANCISCO CA 94107"
}