JAVASCRIPT
Creating a Reusable `useGeolocation` Composable
Build a custom Vue 3 `useGeolocation` composable to reactively fetch and manage the user's current location, providing latitude, longitude, and error states.
// src/composables/useGeolocation.js
import { ref, onMounted, onUnmounted } from 'vue';
export function useGeolocation() {
const coords = ref({ latitude: null, longitude: null });
const error = ref(null);
let watcherId = null;
const updatePosition = (position) => {
coords.value = {
latitude: position.coords.latitude,
longitude: position.coords.longitude,
};
error.value = null; // Clear any previous errors
};
const handleGeolocationError = (err) => {
error.value = err.message;
console.error('Geolocation Error:', err);
};
onMounted(() => {
if ('geolocation' in navigator) {
watcherId = navigator.geolocation.watchPosition(
updatePosition,
handleGeolocationError,
{ enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }
);
} else {
error.value = 'Geolocation is not supported by your browser.';
}
});
onUnmounted(() => {
if (watcherId !== null) {
navigator.geolocation.clearWatch(watcherId);
}
});
return { coords, error };
}
// src/components/GeolocationDisplay.vue
<template>
<div>
<h2>Your Location:</h2>
<div v-if="error">{{ error }}</div>
<div v-else-if="coords.latitude && coords.longitude">
<p>Latitude: {{ coords.latitude }}</p>
<p>Longitude: {{ coords.longitude }}</p>
</div>
<div v-else>
<p>Fetching location...</p>
</div>
</div>
</template>
<script setup>
import { useGeolocation } from '../composables/useGeolocation';
const { coords, error } = useGeolocation();
</script>
How it works: This snippet creates a reusable Vue 3 `useGeolocation` composable to encapsulate the logic for accessing the user's location via the browser's Geolocation API. It uses `ref` to manage reactive `coords` and `error` states. `onMounted` starts watching the user's position, and `onUnmounted` clears the watcher to prevent memory leaks, ensuring proper resource management. The `GeolocationDisplay.vue` component then simply imports and destructures the returned reactive values from `useGeolocation` to display the location or any errors, demonstrating how to use the composable in any component.