Composants
AddressAutocomplete
Composant d'autocomplétion d'adresse avec intégration API de géocodage
Composant d'autocomplétion d'adresse qui s'intègre avec l'API de géocodage française pour fournir des suggestions d'adresses en temps réel.
Usage
Basic
Utilisez le composant AddressAutocomplete avec les props minimales :
<template>
<AddressAutocomplete
v-model="selectedAddress"
v-model:search-term="searchTerm"
/>
</template>
<script setup>
const selectedAddress = ref();
const searchTerm = ref('');
</script>
Avec options
Exemple avec toutes les options :
<template>
<AddressAutocomplete
v-model="selectedAddress"
v-model:search-term="searchTerm"
placeholder="Recherchez une adresse..."
/>
</template>
<script setup>
const selectedAddress = ref({
city: "Paris",
label: "1 rue de la Paix, 75001 Paris",
postcode: "75001",
street: "1 rue de la Paix",
name: "1 rue de la Paix"
});
const searchTerm = ref('1 rue de la Paix');
</script>
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | AddressItem | undefined | undefined | Adresse sélectionnée |
searchTerm | string | '' | Terme de recherche actuel |
Events
| Event | Payload | Description |
|---|---|---|
update:modelValue | AddressItem | undefined | Émis lorsque l'utilisateur sélectionne une adresse |
update:searchTerm | string | Émis lorsque l'utilisateur tape dans le champ de recherche |
Slots
| Slot | Description |
|---|---|
empty | Contenu affiché lorsqu'aucun résultat n'est trouvé |
Exemples
Exemple 1 : Intégration avec un formulaire
<template>
<UForm :state="form" @submit="handleSubmit">
<UFormGroup label="Adresse" name="address">
<AddressAutocomplete
v-model="form.address"
v-model:search-term="searchTerm"
@update:model-value="handleAddressSelect"
/>
</UFormGroup>
<UButton type="submit">Valider</UButton>
</UForm>
</template>
<script setup>
const form = reactive({
address: null,
street: '',
postalCode: '',
city: ''
});
const searchTerm = ref('');
function handleAddressSelect(address) {
if (address) {
form.street = address.street || '';
form.postalCode = address.postcode;
form.city = address.city;
}
}
function handleSubmit() {
// Soumission du formulaire
}
</script>
Exemple 2 : Personnalisation du message d'erreur
<template>
<AddressAutocomplete
v-model="selectedAddress"
v-model:search-term="searchTerm"
>
<template #empty>
<span class="text-red-500">Aucun résultat, essayez une autre adresse</span>
</template>
</AddressAutocomplete>
</template>
Notes
Le composant utilise l'API de géocodage française (https://data.geopf.fr/geocodage/search) avec un délai de debounce de 500ms. Les résultats sont limités à 7 suggestions par défaut.