reactive-helpersReactive composition utilities for Vue 3

Render a reactive list, sync one object, and track loading and error state. You bring the data layer; the composables stay transport agnostic.

Get started

API reference

ContactList.vue

vue

<script setup>
import { useListInstance } from "@arrai-innovations/reactive-helpers";

const contacts = useListInstance({
    props: { pkKey: "contactId" },
    handlers: {
        list: async ({ pushObjects }) => {
            const response = await fetch("/api/contacts");
            pushObjects(await response.json());
        },
    },
});

contacts.list();
</script>

<template>
    <ul>
        <li v-for="row in contacts.state.objectsInOrder" :key="row.contactId">
            {{ row.name }}
        </li>
    </ul>
</template>

Render a reactive list

The recommended first success. Fetch contacts through one handler and render stable, keyed, ordered rows with useListInstance.

Load and edit one object

Retrieve a single record into a reactive form, then save it back through your transport with useObjectInstance.

Track loading and error state

A small supporting primitive. Fold useLoadingError into your own composites to drive progress and error UI.

Bring your own transport

Every composable pairs reactive state with actions and leaves fetching to you, so it fits any backend or client.

Where to start

The component above fetches contacts through one handler, keys each row by contactId, and renders them in push order. The composable owns the reactive state; your handler owns the request. Build a reactive list walks through it step by step, including loading and error state.