@samhess/vue-address-input

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

Please refer to Mapbox Geocoding API documentation for further information

Events