Attach StreetKit in Vue lifecycle hooks

When to use

Use this pattern when a Vue app can load the hosted widget assets once and attach the widget to a real input after the component is mounted.

Load the hosted assets

<link rel="stylesheet" href="https://streetkit.smp.kiwi/widget/streetkit.css">
<script src="https://streetkit.smp.kiwi/widget/streetkit.js" defer></script>

Vue 3 composition pattern

<script setup>
import { onBeforeUnmount, onMounted, ref } from "vue";

const addressInput = ref(null);
let widget;

onMounted(() => {
  if (!addressInput.value || !window.StreetKit) return;

  widget = window.StreetKit.init({
    input: addressInput.value,
    publicMode: true,
    indexBaseUrl: "https://index.streetkit.smp.kiwi/public/v1",
    onSelect(address) {
      console.log(address.label);
    },
    onError(error) {
      console.warn("StreetKit error", error.code);
    }
  });
});

onBeforeUnmount(() => {
  widget?.destroy();
});
</script>

<template>
  <input
    ref="addressInput"
    id="shipping-address"
    name="shipping_address"
    autocomplete="off"
  >
</template>

Limitations

• No StreetKit Vue plugin or package is shipped today.
• Initialize on the client only; SSR pages should avoid touching window during server render.
• Do not duplicate StreetKit search, ranking, static index fetching, or dropdown behavior in Vue state.
• Destroy the widget before unmount to remove listeners and dropdown DOM.
• The host app still owns validation, submission, and manual fallback.