Vue Component for Address Completion

This is a Vue 3 Single File Components (SFC) for address autocompletion. It integrates with Mapbox Geocoding API and Bootstrap 5.

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

npm install @samhess/vue-address-input

Usage

<template>
  <AddressInput @addressSelect="getAddress" :mapboxOptions="mapboxOptions"></AddressInput>
</template>

<script setup>
  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)
  }
</script>

Demo

Demo is hosted on GitHub Pages (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 for further information

Events

Event	Description
@addressSelect	Triggered when user selects address. Returns object with selected address containing street, postcode, city state and country