1.0.0 • Published 3 years ago

@samhess/vue-address-input v1.0.0

Weekly downloads
-
License
ISC
Repository
github
Last release
3 years ago

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

PropertySubpropertyTypeDescriptionRequiredDefault
mapboxOptionsObjectMapbox options as indicated belowYes
.access_tokenStringMapbox access tokenYes''
.limitStringLimit of suggestionsNo10
.proximityStringSearch nearNo'ip'
.autocompleteBooleanAutocomplete search inputNotrue
.fuzzyMatchBooleanNot only exact matchNotrue
.countryStringLimit to certain countriesNo''
.languageStringLanguage for search and resultsNo'en'

Please refer to Mapbox Geocoding API documentation for further information

Events

EventDescription
@addressSelectTriggered when user selects address. Returns object with selected address containing street, postcode, city state and country