@directive-run/vue

@directive-run/vue

Vue 3 composables for Directive. Returns reactive Ref and ShallowRef values that integrate with Vue's reactivity system.

Install

npm install @directive-run/core @directive-run/vue

Quick Start

Define a module in a shared file, then use it in any component:

// system.ts
import { createModule, createSystem, t } from "@directive-run/core";

const counter = createModule("counter", {
  schema: {
    facts: { count: t.number() },
    derivations: { doubled: t.number() },
    events: { increment: {}, decrement: {} },
    requirements: {},
  },
  init: (facts) => {
    facts.count = 0;
  },
  derive: {
    doubled: (facts) => facts.count * 2,
  },
  events: {
    increment: (facts) => { facts.count += 1; },
    decrement: (facts) => { facts.count -= 1; },
  },
});

export const system = createSystem({ module: counter });
system.start();

<!-- Counter.vue -->
<script setup lang="ts">
import { useFact, useDerived, useEvents } from "@directive-run/vue";
import { system } from "./system";

const count = useFact(system, "count");
const doubled = useDerived(system, "doubled");
const events = useEvents(system);
</script>

<template>
  <p>Count: {{ count }} (doubled: {{ doubled }})</p>
  <button @click="events.increment()">+</button>
  <button @click="events.decrement()">&minus;</button>
</template>

useSelector

Auto-tracking selector over facts and derivations. Returns a Ref that updates when accessed keys change:

<script setup lang="ts">
import { useSelector } from "@directive-run/vue";
import { system } from "./system";

const label = useSelector(system, (state) => {
  return state.count > 10 ? "High" : "Low";
});
</script>

<template>
  <span>{{ label }}</span>
</template>

API Reference

Core Composables

Advanced Composables

Vue-Specific

Peer Dependencies

• vue >= 3
• @directive-run/core

Documentation

• Vue Adapter Guide
• API Reference

License

MIT