Vue

Install the adapter alongside Vue 3.5 or newer:

pnpm add @omni-async/vue

Query

<script setup lang="ts">
import { useQuery } from "@omni-async/vue";

const users = useQuery(
  async (team: string) => {
    const response = await fetch(`/api/teams/${team}/users`);
    if (!response.ok) throw new Error("Unable to load users");
    return response.json() as Promise<string[]>;
  },
  { initial: () => [] },
);
</script>

<template>
  <button :disabled="users.loading.value" @click="users.trigger('platform')">Load users</button>
</template>

The result fields are Vue refs. useAsync automatically unsubscribes and invalidates active operations when its current effect scope is disposed.

Shared data ref

Vue queries can write into an existing ref:

const data = shallowRef<User[]>();
const query = useQuery(loadUsers, { data });

Successful results update the provided ref, allowing state ownership to remain outside the composable.

React

Svelte