Swiftcomplete Vue

Address and what3words search in a Vue 3 wrapper around the <swiftcomplete-search> web component. Type to get suggestions, select to fill your form or handle the result via composables.

Features

• Address search - Postcodes, street names, full addresses.
• what3words search - Enable via API to search by three-word addresses.
• Device location - Optional biasing of results by user's location.
• Styling - Same as the web component: variant, size, theme props and CSS variables. Automatically follows prefers-color-scheme by default.
• Events via composables - useSelectedAddress, useSearchStarted, useSearchEnded, useManualEntry, useSearchClear, useSearchFocus, useSearchBlur, and useEvents (all-in-one).
• Ref API - getElement(), getInput(), and imperative methods like populateFields().

Quick start

<script setup lang="ts">
import { ref } from 'vue';
import { Swiftcomplete } from '@swiftcomplete/vue';
import type { SwiftcompleteRef } from '@swiftcomplete/vue';

const swiftcompleteRef = ref<SwiftcompleteRef | null>(null);
</script>

<template>
  <Swiftcomplete
    ref="swiftcompleteRef"
    api-key="YOUR_API_KEY"
    placeholder="Search address or postcode"
  />
</template>

Configure the API (API key, country, search options, device location) via useApi(config). See Getting started.

Get an API key from Swiftcomplete.

Documentation

| Topic | Description | | ---------------------------------------------- | --------------------------------------------------------------------------------- | | Getting started | Installation, API key, basic usage with ref and composables | | Props | apiKey, placeholder, country, variant, size, theme, overrides | | Styling | Variant, size, theme, CSS variables, custom icons | | Events (composables) | useSelectedAddress, useSearchStarted, useSearchEnded, useEvents, and more | | what3words search | Enabling what3words via the service | | Device location | Biasing results by the user's location | | Populate fields | Filling form fields from the selected address via ref | | Advanced | useApi config, ref, overriding UI |

Browser support

Same as the underlying web component: modern browsers with custom elements and Shadow DOM. Vue 3.4+.