VueCraft NPM

Vue Integration ​

Composables for using PipelineOrchestrator and createRestClient() reactively in Vue 3. Import from rest-pipeline-js/vue (re-exports the core entry point too, so a single import covers both).

vue
<script setup>
import {
  PipelineOrchestrator,
  usePipelineProgressVue,
  usePipelineRunVue,
} from 'rest-pipeline-js/vue'

const orchestrator = new PipelineOrchestrator({
  config: {
    stages: [/* ... */],
  },
})
const progress = usePipelineProgressVue(orchestrator)
const { run, running, result, error, abort, pause, resume, rerunStep } =
  usePipelineRunVue(orchestrator)
</script>

<template>
  <div>
    <div>Current stage: {{ progress.currentStage }}</div>
    <button @click="run()" :disabled="running">Start</button>
    <button @click="abort()" :disabled="!running">Abort</button>
    <button @click="pause()">Pause</button>
    <button @click="resume()">Resume</button>
    <div v-if="result">Done: {{ result }}</div>
    <div v-if="error">Error: {{ error.message }}</div>
  </div>
</template>

usePipelineRunVue(orchestrator) ​

Run the pipeline and track its status/result reactively.

Parameters ​

orchestrator: PipelineOrchestrator

Returns ​

{ run, running, result, error, stageResults, abort, pause, resume, rerunStep, clearStageResults }

running/result/error/stageResults are Refs; run/abort/pause/resume/rerunStep/clearStageResults call straight through to the matching PipelineOrchestrator method, with run/abort additionally updating the reactive state above.

usePipelineProgressVue(orchestrator) ​

Reactive pipeline progress.

Parameters ​

orchestrator: PipelineOrchestrator

Returns ​

Ref<PipelineProgress> — updates on every orchestrator.subscribeProgress() callback.

usePipelineStageResultVue(orchestrator, stepKey) ​

Reactive result of one specific stage — updates on every change to stageResults, not just once.

Parameters ​

  • orchestrator: PipelineOrchestrator
  • stepKey: string — key of the step to observe

Returns ​

Ref<PipelineStepResult | null>

ts
const userResult = usePipelineStageResultVue(orchestrator, 'fetchUser')
// userResult.value?.status === "success"
// userResult.value?.data — the step's data

usePipelineStepEventVue(orchestrator, stepKey, eventType) ​

Subscribe to a specific step's event (success/error/progress).

Parameters ​

  • orchestrator: PipelineOrchestrator
  • stepKey: string
  • eventType: "success" | "error" | "progress"

Returns ​

Ref<any> — last event payload.

usePipelineLogsVue(orchestrator) ​

Reactive pipeline logs.

Parameters ​

orchestrator: PipelineOrchestrator

Returns ​

Ref<log[]> — updates on every "log" event.

useRerunPipelineStepVue(orchestrator) ​

Bound rerunStep for one orchestrator, convenient to pass directly as an event handler.

Parameters ​

orchestrator: PipelineOrchestrator

Returns ​

(stepKey: string, options?) => Promise<...> — orchestrator.rerunStep bound to orchestrator.

useRestClientVue(config) ​

Reactive, memoized RestClient — recomputes only when config changes.

Parameters ​

config: HttpConfig — same shape as createRestClient()'s config.

Returns ​

ComputedRef<RestClient>