Lob Vue Address Autocomplete Components

Features

This is a very lightweight 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 for more configuration options on Postman or Lob Documentation.

As always if this front end component doesn't suit your bootstrapped needs, feel free to check out the aformentioned links above to have more control over the look and feel of your address autocomplete and verification needs :)

Install

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

Make sure to include our component styles in your js entry point or at the component level:

# inside main.js or component file
import '@lob/vue-address-autocomplete/dist/styles.css';

Address Autocomplete Search Bar Demo Code

<template>
  <div>
    <AddressAutocomplete apiKey="YOUR_API_KEY_HERE" :addresses="addresses" @selectItem="selectItem" @newSuggestions="addNewSuggestions" />
    <div class="column column-40">
      <pre><code>{{selection}}</code></pre>
    </div>
  </div>
</template>

<script>
import AddressAutocomplete from '@lob/vue-address-autocomplete'
export default {
  components: {
    AddressAutocomplete
  },
  data() {
    return {
      addresses: [],
      selection: ''
    }
  },
  methods: {
    selectItem(item) {
      this.selection = item;
    },
    addNewSuggestions(suggestedAddresses) {
      this.addresses = suggestedAddresses;
    }
  }
};
</script>

Additional Resources

Blog with more demos

Youtube demo

How to Build and publish

Run

npm run build
npm publish