Vue 3

30-second example

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { setup as setupFinder } from '@postio/address-finder';

const inputEl = ref<HTMLInputElement | null>(null);

onMounted(() => {
  if (!inputEl.value) return;
  setupFinder({
    apiKey: import.meta.env.VITE_POSTIO_KEY,
    input: inputEl.value,
    output: {
      address_line_1: '#line1',
      post_town:      '#town',
      postcode:       '#postcode',
    },
  });
});
</script>

<template>
  <input ref="inputEl" placeholder="Start typing an address…" />
  <input id="line1" />
  <input id="town" />
  <input id="postcode" />
</template>

Other framework examples

• Plain HTMLNo build step, no framework. One HTML file, three script lines, working autocomplete.
• Next.js (App Router)Server Components + client AddressFinder, validation in a Server Action.
• React (Vite)@postio/react + TanStack Query, fast dev loop.
• SvelteKitServer-side validation in +page.server.ts; client widget mounted in onMount.
• AstroStatic-first with islands. Address widget as a hydrated island.
• Cloudflare WorkersServer-side validation in a Worker — @postio/core uses native fetch, no Node polyfills.