skills.rest
stevessr
stevessrCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

create-adaptable-composable

Create Vue 3 composables that normalize MaybeRefOrGetter inputs with toRef or toValue.

Updated Dec 1, 2025
Search Tags:#reactivity#vue3#composables#getter#maybe-ref#tovalue#toref
One-click install
npx skills add https://github.com/stevessr/dotsfiles --skill create-adaptable-composable-stevessr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-adaptable-composable
Source: https://github.com/stevessr/dotsfiles/tree/main/dot_agents/skills/create-adaptable-composable
Command: npx skills add https://github.com/stevessr/dotsfiles --skill create-adaptable-composable-stevessr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Adaptable composables accept both reactive and non-reactive inputs, enabling reusable utilities across Vue 3 and Nuxt 3 projects.

Core Features & Use Cases

  • Unified input handling: Accept MaybeRef or plain values and normalize them inside reactive effects using toRef or toValue.
  • Safe normalization: Provide consistent behavior in watch/watchEffect by converting inputs to reactive sources.
  • Use case: Build composables like a document title manager or a counter that works with both value and ref inputs.

Quick Start

Create an adaptable composable that accepts MaybeRefOrGetter inputs and normalizes them with toRef or toValue inside a reactive effect.

Frequently Asked Questions about create-adaptable-composable

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make a Vue 3 composable accept both reactive refs and plain values?▼

To make a Vue 3 composable accept both reactive refs and plain values, define inputs using MaybeRefOrGetter types and normalize them inside reactive effects with toRef or toValue for consistent behavior.

What is the difference between toValue and toRef when normalizing composable inputs?▼

The difference is that toValue resolves inputs to non-reactive values for immediate reads, while toRef normalizes inputs into reactive sources, ensuring Vue 3 composables maintain reactivity inside watch or watchEffect.

How do I handle MaybeRef inputs inside a watchEffect in a Nuxt 3 composable?▼

To handle MaybeRef inputs inside a watchEffect in a Nuxt 3 composable, use toValue to unwrap the input safely within the reactive effect, ensuring the composable tracks dependencies without breaking normal value usage.

Does toValue work with getter functions in Vue 3 composables?▼

Yes, toValue works with getter functions in Vue 3 composables by resolving MaybeRefOrGetter inputs, allowing developers to pass static values, refs, or getter functions and normalize them consistently inside reactive effects.

What is the best way to build a Vue composable for managing document titles with reactive inputs?▼

The best way to build a Vue composable for managing document titles with reactive inputs is to accept MaybeRefOrGetter arguments and normalize them using toRef, creating a library-grade utility that safely updates across reactive and non-reactive sources.

When should I use toRef instead of toValue for composable input normalization?▼

You should use toRef instead of toValue when your composable needs to return a reactive source that participates in Vue 3 dependency tracking, whereas toValue is suited for extracting plain unwrapped values during processing.

Related Skills

Explore More Software Engineering Skills→
Cancey-DejeanCancey-Dejean

create-adaptable-composable

Generate Vue 3 and Nuxt 3 composables that normalize MaybeRef inputs with toValue() and toRef().

Community
Intermediate
slashwhyslashwhy
5

vue-composables

Implement Vue 3 composable patterns for reusable logic and reactive state.

Official
Intermediate
trcattrcat

create-adaptable-composable

Build Vue 3 composables that normalize MaybeRefOrGetter inputs with toValue() or toRef().

Community
Basic
NKDShinKuNKDShinKu

create-adaptable-composable

Build Vue 3 composables that normalize MaybeRef inputs with toRef() and toValue().

Community
Advanced