Resilient Composables with toValue Normalization

Snippet

Resilient Composables with toValue Normalization

Introduced in Vue 3.3, toValue is a powerful utility that normalizes inputs that could be raw values, refs, or reactive getter functions. This allows composables to be extremely flexible, accepting both static values and dynamic reactive sources without complex logic.

snippet.js
javascript
import { toValue, watchEffect, ref } from 'vue';
 
export function useDataFetch(source) {
  const data = ref(null);
  
  watchEffect(async () => {
    const url = toValue(source);
    const response = await fetch(url);
    data.value = await response.json();
  });
 
  return { data };
}

vue

Breakdown

toValue(source)

Unwraps the input regardless of whether it is a Ref, a reactive function (getter), or a plain value.

Previous snippet

More Expert JavaScript exercises →

From your library

Resilient Composables with toValue Normalization

Related