Files

T

fargo 1a822493ba format: apply repo prettier (3.8.1) to the folded skills tree

963 markdown files reformatted with the repository's pinned prettier so
pnpm format:check covers the folded tree like every other repo file.

The formatter's embedded-language pass also normalized code fences
(TS semicolons, closed HTML tags in examples, lowercased CSS hex colors,
one renumbered list that skipped an index). Alphanumeric token deltas vs
the fold commit were audited file-by-file; all are formatter-equivalent
markup normalizations plus the four sanitized skills.

2026-08-19 14:37:17 -05:00

1.8 KiB

Raw Blame History

category
Watch

whenever

Shorthand for watching value to be truthy.

Usage

import { useAsyncState, whenever } from '@vueuse/core';

const { state, isReady } = useAsyncState(
  fetch('https://jsonplaceholder.typicode.com/todos/1').then((t) => t.json()),
  {},
);

whenever(isReady, () => console.log(state));

import { whenever } from '@vueuse/core';
// ---cut---
// this
whenever(ready, () => console.log(state));

// is equivalent to:
watch(ready, (isReady) => {
  if (isReady) console.log(state);
});

Callback Function

Same as watch, the callback will be called with cb(value, oldValue, onInvalidate).

import { whenever } from '@vueuse/core';
// ---cut---
whenever(height, (current, lastHeight) => {
  if (current > lastHeight) console.log(`Increasing height by ${current - lastHeight}`);
});

Computed

Same as watch, you can pass a getter function to calculate on each change.

import { whenever } from '@vueuse/core';
// ---cut---
// this
whenever(
  () => counter.value === 7,
  () => console.log('counter is 7 now!'),
);

Options

Options and defaults are same with watch.

import { whenever } from '@vueuse/core';
// ---cut---
// this
whenever(
  () => counter.value === 7,
  () => console.log('counter is 7 now!'),
  { flush: 'sync' },
);

Type Declarations

export interface WheneverOptions extends WatchOptions {
  /**
   * Only trigger once when the condition is met
   *
   * Override the `once` option in `WatchOptions`
   *
   * @default false
   */
  once?: boolean;
}
/**
 * Shorthand for watching value to be truthy
 *
 * @see https://vueuse.org/whenever
 */
export declare function whenever<T>(
  source: WatchSource<T | false | null | undefined>,
  cb: WatchCallback<T>,
  options?: WheneverOptions,
): WatchHandle;

1.8 KiB Raw Blame History