Address Autocomplete component for Vue powered by Lob

Overview

vue2-lob-address-autocomplete

Address Autocomplete component for Vue powered by Lob

NPM JavaScript Style Guide

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

LOB Autocomplete 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.

Address Verification dashboard

API Keys

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

You might also like...
A simple tags input with typeahead (autocomplete) built with Vue.js 2.
A simple tags input with typeahead (autocomplete) built with Vue.js 2.

Vue Tags Input v4 Forked from voerro/vue-tagsinput A simple tags input with typeahead built with Vue.js 2. Installation via NPM npm i @seriouslag/vue-

A simple tags input with typeahead (autocomplete) built with Vue.js 2.
A simple tags input with typeahead (autocomplete) built with Vue.js 2.

Voerro Vue Tags Input v2 A simple tags input with typeahead built with Vue.js 2. Live Demo Installation via NPM npm i @voerro/vue-tagsinput --save-dev

A better vim plugin for stylus, including proper and up-to-date syntax highligting, indentation and autocomplete
A better vim plugin for stylus, including proper and up-to-date syntax highligting, indentation and autocomplete

Vim Stylus Vim + Stylus = fast, effective and convenient CSS workflow! Features All HTML5 tags and CSS3 props are covered Correct highlighting for int

🔍 Vue autosuggest component.
🔍 Vue autosuggest component.

vue-autosuggest 🔍 Autosuggest component built for Vue. Table of Contents Examples Features Installation Usage Props Inspiration Contributors LICENSE

A configurable & lightweight Vue wrapper component that enables
A configurable & lightweight Vue wrapper component that enables

A configurable & lightweight Vue wrapper component that enables "out of the box" email autocomplete/suggestions on input elements.

Mention component for Vue.js
Mention component for Vue.js

vue-mention Mention popper for input and textarea Documentation Sponsors Quick start script import { Mentionable } from 'vue-mention' const users =

 🔍 Autosuggest component built for Vue
🔍 Autosuggest component built for Vue

vue-autosuggest 🔍 Autosuggest component built for Vue. Table of Contents Examples Features Installation Usage Props Inspiration Contributors LICENSE

A simple modular Vuejs component that autosuggest input from a dyanamic or static data querying.
A simple modular Vuejs component that autosuggest input from a dyanamic or static data querying.

v-autosuggest A simple modular Vuejs component that autosuggest input from a dyanamic or static data querying. Table of contents Installation Usage Pr

A simple tag component with typeahead
A simple tag component with typeahead

v-tag-suggestion A simple tag component with typeahead ⌨️ Install via npm npm install vue-tag-suggestion Import and register where you want to use imp

Owner
Lob
Building APIs to Increase Connectivity Between the Offline and Online Worlds
Lob
Autocomplete component for Vue js

vuejs-auto-complete A Vue autocomplete component npm install vuejs-auto-complete --save Usage Installation, add autocomplete component into your app i

Charlie Kassel 136 Nov 8, 2022
Feature-rich autocomplete component for Vue.js

vue-simple-suggest Simple yet feature-rich autocomplete component for Vue.js Install npm install --save vue-simple-suggest See installation guide for

Marketplace Technologies 442 Jan 4, 2023
An autocomplete/typeahead component for Vue 2 and Bootstrap 4

vue-bootstrap-typeahead A simple list-group based typeahead/autocomplete using Bootstrap 4 and Vue 2 View The Examples Installation From NPM: > npm i

Alex Urquhart 209 Nov 19, 2022
A Vue component for autocomplete email domains

vue-email-dropdown A Vue component for autocomplete email domains Features Allows passing a list of domains to be used in for the suggestions. Allows

Danny Feliz 27 Nov 24, 2022
Autocomplete Component for Vue.Js

vue-autocomplete Autocomplete Component for Vue.Js Intro Vue Autocomplete is a Vue.Js component to make some suggestions for user input. come with .vu

Naufal Rabbani 210 Jan 18, 2022
Vue 2 Component to make Autocomplete element.

Vue 2 Autocomplete Autocomplete component for Vue 2. This is a fork of vue2-autocomplete - Naufal Rabbani [email protected] Install You can imp

Eduardo Aguad 0 Oct 12, 2017
A Vue Autocomplete component with accessibility and simplicity in mind.

VueCompleter A Vue Autocomplete component with accessibility and simplicity in mind. Installation npm install vue-completer or yarn add vue-completer

Tom Elliott 3 Nov 8, 2020
vue autoComplete component

vueto-complete vue autoComplete component Index Features Installation Examples Props Slots Events Styling LICENSE Features Supports full control over

Ahmed Abdallah 16 Jan 10, 2022
Google Autocomplete Vue Componet

Google Autocomplete I am sharing this component because I was overwhelmed by complicated examples to achieve this simple job. So, I will try to be as

Gustavo Ocanto 275 Aug 29, 2022
🧱 Very Downshift like autocomplete solution for Vue

Vue Combo Blocks ?? Provides all the building blocks needed for accessible autocomplete, combobox, or typeahead component. A very Downshift like autoc

Simeon Kerkola 17 Jul 7, 2022