Vue.js adresse autocomplete Danmark · Composition API

Tilføj dansk adresse-autocomplete til din Vue 3-app med Composition API: ét watchEffect-kald mod api.danadresse.dk og du har typo-tolerant typeahead med 2,7 mio. danske adresser.

Status: Live — kræver API-nøgle (gratis, ingen kreditkort)

Hvad du får

Vue 3 Composition API

ref() + watchEffect() — ingen store, ingen plugin, ét component.

Nuxt 3 server routes

Proxy API-nøglen i en Nuxt server route — klienten ser aldrig nøglen.

Pinia-integration

Gem seneste autocomplete-resultater i en Pinia store for delt state på tværs af komponenter.

Eksempel

// Vue 3 Composition API
const q = ref('')
const hits = ref([])
watchEffect(async () => {
  if (!q.value) return
  const r = await fetch(
    `https://api.danadresse.dk/autocomplete?q=${q.value}`,
    { headers: { 'X-Api-Key': import.meta.env.VITE_DANADRESSE_KEY } }
  )
  hits.value = await r.json()
})

Sådan bliver det brugt

Vue SPA checkout

Integrer i eksisterende checkout-flow uden at ændre formular-struktur.

Nuxt content-site

Server-renderet adressesøgning med fuld SSR-support via useAsyncData.

Headless e-handel

Kombiner med Shopify Storefront API eller WooCommerce REST — addresses valideret, ordrer korrekte.

Drop-in DAWA-kompatibel

Slug /vue-adresse-autocomplete følger DAWA's konventioner — samme paths, samme JSON-shape, samme UUID'er. Se migration guide for det fulde overblik.

Se også

Gratis API (1 000 kald/md) WooCommerce autocomplete Shopify adresse-API Checkout autocomplete Ejendomsmægler-bundle

Klar til at integrere?

Gratis nøgle, ingen kreditkort, 1 000 kald/måned.

Start gratis → Læs API-dokumentation →