Vue

@atolljs/vue — Composables producing Refs. Subscriptions release via onScopeDispose when the component unmounts.

Install

frontend

npm install @atolljs/core @atolljs/vue

Usage

App.vuefrontend

<script setup lang="ts">
import { useSharedValue, useTask } from '@atolljs/vue';
import { counterMemory } from './counter.memory';
import { counter } from './counter';

const count = useSharedValue(counterMemory, 'count');
const increment = useTask(counter.increment);
</script>

<template>
  <button @click="increment.run(1)">
    count: {{ count ?? '…' }}
  </button>
</template>

Binding API

Export	Signature	What it does
`useObservable`	`useObservable(source: ObservableValue<T>): Ref<T>`	Subscribe to any observable snapshot.
`useSharedValue`	`useSharedValue(memory, key, select?, options?): Ref<T \| undefined>`	Bind one shared-memory field to a Ref; optional selector + equality.
`useTask`	`useTask(task \| asyncFn): { state: Ref<TaskSnapshot>, run, runOnce }`	Bind an AsyncTask — or any async fn — to a Ref and get its triggers.

Live demo

@atolljs/vuevue/ ↗

If the frame is blank, the examples aren't up — run npm run dev:all (dev servers) or npm run serve:all (built apps) from the repository root.

Notes

watch() the task's settled Ref to trigger follow-up work after a run.
Worker-hosted Vue trees (islands) live in the companion package @atolljs/vue-island — see the Islands page under this section.