use-scheduler-post-task

Post prioritized tasks with the Prioritized Task Scheduling API.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/composable

Import the entry directly. Call lifecycle-bound utilities inside <script setup> so cleanup follows the component scope; consult the runtime contract for this entry's SSR and hydration behavior.

import { useSchedulerPostTask } from "@vizejs/composable/use-scheduler-post-task";

Try it

Run tasks by priority

Queue work with user-blocking, user-visible and background priorities.

Open the interactive example

What to observe: Queue three tasks runs respond to the click, then update the list, then prefetch next page, regardless of the order they were queued.

abort() cancels pending tasks and yield() lets the browser handle input between chunks of work.

Compare the initial and interacted states

Copy the example

Save this complete SFC in your Vue project. Its public imports and source are the same ones executed in the preview.

<script setup lang="ts">
import { ref } from "vue";
import { useMounted } from "@vizejs/composable/use-mounted";
import { useSchedulerPostTask } from "@vizejs/composable/use-scheduler-post-task";

const { postTask, supported } = useSchedulerPostTask();
const order = ref<string[]>([]);
const mounted = useMounted();

async function runTasks() {
  order.value = [];
  await Promise.all([
    postTask(() => order.value.push("prefetch next page"), { priority: "background" }),
    postTask(() => order.value.push("update the list"), { priority: "user-visible" }),
    postTask(() => order.value.push("respond to the click"), { priority: "user-blocking" }),
  ]);
}
</script>

<template>
  <div class="composable-example">
    <p>Schedule work by priority so the most urgent task runs first.</p>
    <button type="button" @click="runTasks">Queue three tasks</button>
    <ol aria-label="Run order">
      <li v-for="task in order" :key="task">{{ task }}</li>
    </ol>
    <output aria-live="polite">{{
      !mounted
        ? "Checking the scheduler…"
        : supported
          ? "Using the browser's task scheduler."
          : "Using a timer fallback."
    }}</output>
  </div>
</template>

Runtime contract

API

useSchedulerPostTask

Post prioritized tasks with the Prioritized Task Scheduling API. Every task gets its own controller (a TaskController when available), so setPriority re-prioritizes pending tasks and abort rejects them; pending tasks are aborted when the owning reactive scope stops (their promises reject with an AbortError; outside a scope the caller owns abort()). Fallback without scheduler: tasks run from setTimeout(delay) in timer (FIFO) order. Priorities are ignored, so a later "user-blocking" task does not overtake an earlier "background" one, and tasks do not yield to rendering or input the way native tasks do. Server rendering: nothing is scheduled, supported is false and postTask rejects.

function useSchedulerPostTask( options: UseSchedulerPostTaskOptions = {}, ): SchedulerPostTaskControls

const { postTask } = useSchedulerPostTask();
const total = await postTask(() => expensiveSum(rows), { priority: "background" });

Types

SchedulerPostTaskInit

Options passed to SchedulerHost.postTask.

SchedulerHost

Minimal scheduler global.

TaskControllerLike

Minimal TaskController instance.

UseSchedulerPostTaskOptions

Options for useSchedulerPostTask.

PostTaskCallOptions

Per-call options of SchedulerPostTaskControls.postTask.

SchedulerPostTaskControls

Reactive state and actions returned by useSchedulerPostTask.