Vue 3 Data Fetching with Composables

Fetch data in Vue 3 using composables with reactive loading states, error handling, automatic refetch on parameter change, and cleanup on component unmount.

Javascript Vue Data Fetching Updated: 2026-01-15

Code

snippet

import { ref, watchEffect, onUnmounted } from 'vue';

export function useFetch(url) {
  const data = ref(null);
  const error = ref(null);
  const loading = ref(false);
  let controller;

  watchEffect(async () => {
    controller?.abort();
    controller = new AbortController();
    loading.value = true;
    try {
      const res = await fetch(url.value, { signal: controller.signal });
      data.value = await res.json();
    } catch (e) {
      if (e.name !== 'AbortError') error.value = e;
    } finally {
      loading.value = false;
    }
  });

  onUnmounted(() => controller?.abort());
  return { data, error, loading };
}