https://github.com/samhess/vue3-address-input
Vue 3 Address Input with Mapbox and Bootstrap Integration
https://github.com/samhess/vue3-address-input
autocomplete bootstrap5 mapbox vitejs vue3
Last synced: 12 months ago
JSON representation
Vue 3 Address Input with Mapbox and Bootstrap Integration
- Host: GitHub
- URL: https://github.com/samhess/vue3-address-input
- Owner: samhess
- Created: 2022-05-29T18:19:13.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-06-07T07:35:47.000Z (about 4 years ago)
- Last Synced: 2025-03-18T13:13:37.218Z (over 1 year ago)
- Topics: autocomplete, bootstrap5, mapbox, vitejs, vue3
- Language: Vue
- Homepage: https://samhess.github.io/vue3-address-input/index.html
- Size: 356 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vue Component for Address Completion
This is a Vue 3 Single File Components (SFC) for address autocompletion. It integrates with
[Mapbox Geocoding API](https://docs.mapbox.com/api/search/geocoding/) and [Bootstrap 5](https://getbootstrap.com).
A current build of the component can be found in the *dist* directory.
A current build of the example app can be found in the *docs* directory so it can be served on GitHub Pages.
## Installation
```bash
npm install @samhess/vue-address-input
```
## Usage
```html
import { reactive } from 'vue'
// import AddressInput from './components/AddressInput.vue'
// import AddressInput from './components/AddressInput.js'
import AddressInput from '@samhess/vue-address-input'
const editedItem = reactive({})
// mapbox options as per https://docs.mapbox.com/api/search/geocoding
const mapboxOptions = {
access_token : 'YOUR_TOKEN',
limit : 10,
language: 'de'
}
function getAddress(address) {
Object.assign(editedItem,address)
}
```
## Demo
[Demo](https://samhess.github.io/vue3-address-input/index.html) is hosted on GitHub Pages ([docs](/docs) directory)
## Properties
| Property | Subproperty | Type | Description | Required | Default |
| :------: | :-------: | :---: | :---------: | :------: | :-----: |
| mapboxOptions | | Object | Mapbox options as indicated below | Yes | |
| | .access_token | String | Mapbox access token | Yes | '' |
| | .limit | String | Limit of suggestions | No | 10 |
| | .proximity | String | Search near | No |'ip' |
| | .autocomplete | Boolean | Autocomplete search input | No | true |
| | .fuzzyMatch | Boolean | Not only exact match | No | true |
| | .country | String | Limit to certain countries | No | '' |
| | .language | String | Language for search and results | No | 'en' |
Please refer to [Mapbox Geocoding API documentation](https://docs.mapbox.com/api/search/geocoding) for further information
## Events
| Event | Description |
| :---: | :---------: |
| **@addressSelect** | Triggered when user selects address. Returns object with selected address containing street, postcode, city state and country |