Vue Integration

@pulse-js/vue adapts Pulse primitives into native Vue Refs.

Installation

npm install @pulse-js/vue

usePulse

With Sources

Returns a standard Vue Ref that automatically updates.

<script setup lang="ts">
import { source } from '@pulse-js/core';
import { usePulse } from '@pulse-js/vue';

const count = source(0);
// Returns a Ref<number>
const countRef = usePulse(count);

function increment() {
  count.update(n => n + 1);
}
</script>

<template>
  <div>
    <p>Value: {{ countRef }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

With Guards

Returns a Ref<GuardState> for handling semantic states properly.

<script setup lang="ts">
import { guard, guardFail, source } from '@pulse-js/core';
import { usePulse } from '@pulse-js/vue';

const age = source(15);
// Reactive source
const ageRef = usePulse(age);

const isAdult = guard('is-adult', () => {
    if (age() < 18) guardFail('Not an adult');
    return true;
});

// Reactive guard state
const state = usePulse(isAdult);

function setAge(val: number) {
    age.set(val);
}
</script>

<template>
  <div class="guard-test">
    <p>Current Age: {{ ageRef }}</p>
    <div>
        <button @click="setAge(15)">Set 15</button>
        <button @click="setAge(20)">Set 20</button>
    </div>

    <div v-if="state.status === 'ok'" style="color: green">
        <h3>✅ Allowed</h3>
        <p>Value: {{ state.value }}</p>
    </div>
    <div v-else-if="state.status === 'fail'" style="color: red">
        <h3>❌ Blocked</h3>
        <p>Reason: {{ state.reason }}</p>
    </div>
  </div>
</template>

useGuard

A semantic alias for usePulse(guard). It returns a Ref<GuardState> and is the recommended way to consume guards in Vue.

<script setup lang="ts">
import { useGuard } from '@pulse-js/vue';
import { isAdult } from './guards';

const state = useGuard(isAdult);
</script>

<template>
  <p v-if="state.status === 'ok'">Access Granted</p>
  <p v-else-if="state.status === 'fail'">Denied: {{ state.reason }}</p>
</template>