Create Adaptable Composable

1---2name: create-adaptable-composable3description: Create a library-grade Vue composable that accepts maybe-reactive inputs (MaybeRef / MaybeRefOrGetter) so callers can pass a plain value, ref, or getter. Normalize inputs with toValue()/toRef() inside reactive effects (watch/watchEffect) to keep behavior predictable and reactive. Use this skill when user asks for creating adaptable or reusable composables.4license: MIT5metadata:6  author: github.com/vuejs-ai7  version: "17.0.0"8compatibility: Requires Vue 3 (or above) or Nuxt 3 (or above) project9---10 11# Create Adaptable Composable12 13Adaptable composables are reusable functions that can accept both reactive and non-reactive inputs. This allows developers to use the composable in a variety of contexts without worrying about the reactivity of the inputs.14 15Steps to design an adaptable composable in Vue.js:161. Confirm the composable's purpose and API design and expected inputs/outputs.172. Identify inputs params that should be reactive (MaybeRef / MaybeRefOrGetter).183. Use `toValue()` or `toRef()` to normalize inputs inside reactive effects.194. Implement the core logic of the composable using Vue's reactivity APIs.20 21## Core Type Concepts22 23### Type Utilities24 25```ts26/**27 * value or writable ref (value/ref/shallowRef/writable computed)28 */29export type MaybeRef<T = any> = T | Ref<T> | ShallowRef<T> | WritableComputedRef<T>;30 31/**32 * MaybeRef<T> + ComputedRef<T> + () => T33 */34export type MaybeRefOrGetter<T = any> = MaybeRef<T> | ComputedRef<T> | (() => T);35```36 37### Policy and Rules38 39- Read-only, computed-friendly input: use `MaybeRefOrGetter`40- Needs to be writable / two-way input: use `MaybeRef`41- Parameter might be a function value (callback/predicate/comparator): do not use `MaybeRefOrGetter`, or you may accidentally invoke it as a getter.42- DOM/Element targets: if you want computed/derived targets, use `MaybeRefOrGetter`.43 44When `MaybeRefOrGetter` or `MaybeRef` is used: 45- resolve reactive value using `toRef()` (e.g. watcher source)46- resolve non-reactive value using `toValue()`47 48### Examples49 50Adaptable `useDocumentTitle` Composable: read-only title parameter51 52```ts53import { watch, toRef } from 'vue'54import type { MaybeRefOrGetter } from 'vue'55 56export function useDocumentTitle(title: MaybeRefOrGetter<string>) {57  watch(toRef(title), (t) => {58    document.title = t59  }, { immediate: true })60}61```62 63Adaptable `useCounter` Composable: two-way writable count parameter64 65```ts66import { watch, toRef } from 'vue'67import type { MaybeRef } from 'vue'68 69function useCounter(count: MaybeRef<number>) {70  const countRef = toRef(count)71  function add() {72    countRef.value++73  }74  return { add }75}76```