How to add Address Autocomplete and Verification Using Lob’s Vue Component Library

We got a lot of eyeballs on our article last fall about autocomplete and address verify with React. 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.

Let’s get started!

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

Adding Autocomplete

Replace the contents of the App.vue file generated by vite with the following code:

<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 input is entered.

…But what if we want to autocomplete international addresses?

International Autocomplete

International autocomplete and verification work the same as the U.S. version with the addition of a couple props - isInternationaland country. Here’s what that looks like (only a couple of countries being used 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 of other things worth noting about international autocomplete:

• International autocomplete will not work for addresses from the U.S. or U.S. territories, please default back isInternational = false when autocompleting and verifying domestic addresses.

• countryCode must be a 2 letter country short-name code (ISO 3166).

• Vue Address Autocomplete will call the Lob Address Verification (AV) API when the input has three or more characters.

  
  

Let’s return to our initial U.S. autocomplete code for the remainder of this guide.

Address Verification

Lob’s address verification (AV) 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.

Displaying an Address Form

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) => {
          // Simplify response into something readable to the user
          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.

Styling AddressAutocomplete

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

Classes
lob-header
lob-label
lob-typeahead-root
lob-typeahead-input
lob-typeahead-input:focus-visible
lob-typeahead-input::placeholder
lob-typeahead-input-with-label
lob-typeahead-label
lob-typeahead-list
lob-typeahead-list-item
lob-typeahead-list-item-active

Summary

Address autocomplete and address verification has become a standard across many websites online. Vue fans can add this functionality to your web app easily and 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.

Additional resources

• @lob/vue-address-autocomplete repo
• Video tutorial available here

Content courtesy of Lob Software Engineer Muhammad Martinez