Vue — examples

Beyond the minimal binding snippet — the patterns examples/vue is built on: composing a data layer, slicing shared fields, and driving the UI off task state.

A composable data layer

Refs in, computed views out — watch() on the seed task's settled flag re-runs the latest-wins page query whenever the spec changes.

useIncidents.tsfrontend

export function useIncidents(query: Ref<QueryArgs>) {
  const seed = useTask(initIncidents);
  const page = useTask(incidents.queryIncidents);
  const seedProgress = useSharedValue(incidentsMemory, 'signals.seedProgress');
  const metrics = useSharedValue(incidentsMemory, 'state.metrics');

  seed.runOnce();
  watch([query, () => seed.state.value.settled], () => {
    if (seed.state.value.settled) page.run(query.value);
  }, { immediate: true });

  return {
    ready: computed(() => seed.state.value.settled),
    seedProgress: computed(() => seedProgress.value ?? 0),
    metrics: computed(() => metrics.value ?? null),
    page: computed(() => page.state.value.data),
  };
}

Slice a field into a Ref

select + equals — the Ref only emits when the slice changes.

frontend

import { shallowEqual } from '@atolljs/core';

const pressure = useSharedValue(
  incidentsMemory,
  'state.metrics',
  (m) => ({ open: m.open, critical: m.critical }),
  { equals: shallowEqual },
);

React to a task settling

state is a Ref<TaskSnapshot> — watch its fields for follow-up work.

frontend

const page = useTask(incidents.queryIncidents);

watch(() => page.state.value.settled, (ok) => {
  if (ok) console.log('rows:', page.state.value.data?.rows.length);
});