https://github.com/lob/vue-address-autocomplete
https://github.com/lob/vue-address-autocomplete
Last synced: 26 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/lob/vue-address-autocomplete
- Owner: lob
- License: mit
- Created: 2022-03-29T23:39:48.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-06-20T17:03:00.000Z (almost 2 years ago)
- Last Synced: 2025-04-24T03:48:36.453Z (about 1 month ago)
- Language: JavaScript
- Size: 288 KB
- Stars: 1
- Watchers: 9
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://badge.fury.io/js/@lob%2Fvue-address-autocomplete)
# 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](https://www.postman.com/lobteam/workspace/lob-public-workspace/overview) or [Lob Documentation](https://docs.lob.com/).
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
```bash
npm install --save @lob/vue-address-autocomplete
```
Make sure to include our component styles in your js entry point or at the component level:
```javascript
# inside main.js or component file
import '@lob/vue-address-autocomplete/dist/styles.css';
```
## Address Autocomplete Search Bar Demo Code
```javascript
{{selection}}
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;
}
}
};
```
## Additional Resources
[Blog with more demos](https://www.lob.com/blog/address-autocomplete-and-verification-with-lobs-vue-component-library)
[Youtube demo](https://www.youtube.com/watch?v=WnTvZeT_3hw)
## How to Build and publish
Run
```
npm run build
npm publish
```