We get a lot of questions about autocomplete and address verify with React. But since Lob recently migrated some of our front-end projects from Angular to Vue, we wanted to present a similar solution for Vue developers to clean up both domestic and international addresses with Lob’s Vue Address Autocomplete component. We’ll be creating a Vue app that demos both a single-line address field and an address form:
If you want to watch the video tutorial it's available here.
Let’s get started!
We’ll use Vite to quickly set up a Vue app and install @lob/vue-address-autocomplete:
npm create vite@latest
# Follow the prompts given by Vite
cd my-demo-app
npm install @lob/vue-address-autocomplete
npm run dev
After that last command visit http://localhost:3000/ to see your demo app in action.
We’ll need a Lob API key in order to use Vue Address Autocomplete. Create an account at lob.com (it’s free) then follow these instructions to obtain your API key. For our demo app I recommend using your test public key to avoid any charges to your account and prevent any malicious activity. (These keys start with test_pub_xxxxxxxx)
NOTE: Address verification is disabled for test API keys. When we are ready to verify an address we’ll switch to our live public key.
Replace the contents of the `App.vue` file generated by vite with the following code (App.vue boilerplate code replaced with Autocomplete):<script setup>
import AddressAutocomplete from '@lob/vue-address-autocomplete'
import '@lob/vue-address-autocomplete/dist/styles.css'
</script>
<template>
<main>
<AddressAutocomplete
apiKey="YOUR_API_KEY_HERE"
/>
</main>
</template>
In addition to importing `AddressAutocomplete`, you must also import the stylesheet that it uses (line 3). This could be done in your root component file or in only the file using AddressAutocomplete.
Voilà! Our app now suggests addresses as an input is entered.
But what if we want to autocomplete international addresses?
International autocomplete and verification work the same as the U.S. version with the addition of a couple props: `isInternational` and `country`. Here’s what that looks like (only a couple of countries shown for simplicity):<script setup>
import AddressAutocomplete from '@lob/vue-address-autocomplete'
import '@lob/vue-address-autocomplete/dist/styles.css'
</script>
<template>
<main>
<label for="country" style="margin-right: 1em">Country</label>
<select name="country" id="country" v-model="countryCode" style="margin-bottom: 1em">
<option value="MX">Mexico</option>
<option value="CA">Canada</option>
<option value="FR">France</option>
<option value="CN">China</option>
</select>
<AddressAutocomplete
apiKey="YOUR_API_KEY_HERE"
isInternational=true
:country="countryCode"
/>
</main>
</template>
<script>
export default {
data() {
return {
countryCode: ""
}
}
}
</script>
Although localities may vary by country (e.g. states, provinces, districts, etc.), the address suggestion objects for international addresses use the same keys as the U.S. with the addition of `country`. For example, Alberta is a province in Canada, however Lob will respond with state: AB in its suggested addresses. This way your code doesn’t have to change when switching between domestic and international use cases. A couple other things worth noting about international autocomplete:
Let’s return to our initial U.S. autocomplete code for the remainder of this guide.
Lob’s address verification API checks the validity and deliverability of a physical mailing address in the U.S. or internationally. It also standardizes addresses, corrects typos, and provides analytics about the address being verified (e.g. coordinates, building type, type of delivery route, etc.). Just like with our React address autocomplete, our Vue component library includes the same verification function.
<script setup>
import AddressAutocomplete, { verify } from '@lob/vue-address-autocomplete'
import '@lob/vue-address-autocomplete/dist/styles.css'
</script>
<template>
<main>
<AddressAutocomplete
:apiKey="lobApiKey"
@onInput="handleInput"
@onSelect="handleSelect"
/>
<button @click="handleSubmit">Verify</button>
<p>
{{verificationResult}}
</p>
</main>
</template>
<script>
export default {
data() {
return {
address: '',
lobApiKey: 'YOUR_LOB_API_KEY',
verificationResult: null
}
},
methods: {
handleInput(userInput) {
this.address = userInput
},
handleSelect(selectedAddress) {
this.address = selectedAddress.value
},
handleSubmit() {
verify(this.lobApiKey, this.address)
.then((result) => {
// Simplify response into something readable to the user
const summary = `This address is ${result.deliverability}`
this.verificationResult = summary
})
.catch((errorData) => this.verificationResult = errorData.message)
}
}
}
</script>
<style scoped>
button {
margin-top: 1em;
}
</style>
We’ve added address verification to our app by doing two things:
1) by tracking the most recent autocomplete selection and
2) using `verify` to call Lob’s AV API and displaying the results.
In this example, `address` can be both a suggested address object or the user’s input string. `verify` accepts both options which is useful in the event that a user verifies his/her address without selecting one of Lob’s suggestions. International address verification uses the function `verifyInternational` which requires an additional parameter `countryCode`. This is the same 2-letter country code passed into the AddressAutocomplete component for international.
At the moment there is no AddressForm component like there is in our React Address Autocomplete, however building one is easy. Let’s extend our app to include multiple fields for each address component:
<script setup>
import AddressAutocomplete, { verify } from '@lob/vue-address-autocomplete'
import '@lob/vue-address-autocomplete/dist/styles.css'
</script>
<template>
<main>
<div class="field">
<label for='primary_line'>Address</label>
<AddressAutocomplete
:apiKey="lobApiKey"
primaryLineOnly=true
@onInput="handleInput"
@onSelect="handleSelect"
class="address-autocomplete"
/>
</div>
<div class="field">
<label for='secondary_line'>Apt, Suite</label>
<input id='secondary_line' v-model="address.secondary_line" />
</div>
<div class="field">
<label for='city'>City</label>
<input id='city' v-model="address.city" />
</div>
<div class="field">
<label for='state'>State</label>
<input id='state' v-model="address.state" />
</div>
<div class="field">
<label for='zip_code'>Zip</label>
<input id='zip_code' v-model="address.zip_code" />
</div>
<button @click="handleSubmit">Verify</button>
<p>
{{verificationResult}}
</p>
</main>
</template>
<script>
export default {
data() {
return {
address: {
primary_line: '',
secondary_line: '',
city: '',
state: '',
zip_code: '',
},
lobApiKey: 'YOUR_API_KEY_HERE',
verificationResult: null
}
},
methods: {
handleInput(userInput) {
this.address.primary_line = userInput
},
handleSelect(selectedAddress) {
this.address = selectedAddress.value
},
handleSubmit() {
verify(this.lobApiKey, this.address)
.then((result) => {
const summary = `This primary_line is ${result.deliverability}`
this.verificationResult = summary
})
.catch((errorData) => this.verificationResult = errorData.message)
}
}
}
</script>
<style scoped>
.address-autocomplete {
width: 100%
}
button {
margin-top: 1em;
align-self: flex-end;
}
.field {
display: flex;
flex-direction: row;
justify-content: flex-end;
margin: 0.5em 0em;
}
.field label {
margin-right: 1em;
}
.field input {
flex-grow: 1;
}
</style>
`address` becomes an object for each address component that are then bound to our new address fields. There is also a new prop passed to AddressAutocomplete called `primaryLineOnly` when set to true the input’s value will only update to the suggested address’ primary_line instead of a complete single line address. From there, the rest of our code operates the same.
Simply override the classes used by AddressAutocomplete and/or the CSS variables it uses for a custom appearance. Here is a list of what can be customized:
Style Variables
--lob-header-text-color--lob-input-background-color--lob-input-text-color--lob-label-text-color--lob-suggestion-item-active-background-color--lob-suggestion-item-background-color--lob-suggestion-item-text-colorClasses
lob-headerlob-labellob-typeahead-rootlob-typeahead-inputlob-typeahead-input:focus-visiblelob-typeahead-input::placeholderlob-typeahead-input-with-labellob-typeahead-labellob-typeahead-listlob-typeahead-list-itemlob-typeahead-list-item-activeAddress autocomplete and address verification has become a standard across many websites online. Vue fans can add this functionality to your web app easily without giving up control of appearance or functionality. Plus Lob’s Address Verification product provides additional delivery data to enhance your app’s user experience such as coordinates, county, and delivery info. If you’d like to work with Lob’s Address Verification API directly check out the API documentation here.
