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"
}
License
MIT © lob