skills.rest
NgDuyKhanhs
NgDuyKhanhsCOMMUNITY
Explore all skills by this author →
GitHub

create-adaptable-composable

Create Vue composables that normalize reactive and non-reactive inputs with toRef and toValue.

Updated Mar 24, 2026
Search Tags:#vue#reactivity#composable#composition-api#toValue#toRef#maybe-ref
One-click install
npx skills add https://github.com/NgDuyKhanhs/open-mmo --skill create-adaptable-composable-ngduykhanhs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-adaptable-composable
Source: https://github.com/NgDuyKhanhs/open-mmo/tree/main/frontend/.agents/skills/create-adaptable-composable
Command: npx skills add https://github.com/NgDuyKhanhs/open-mmo --skill create-adaptable-composable-ngduykhanhs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Adaptable 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.

Core Features & Use Cases

  • Normalize inputs inside reactive effects by using toValue() or toRef() to handle MaybeRef or MaybeRefOrGetter inputs
  • Support both read-only and writable inputs with proper reactive conversion paths for toRef and toValue
  • Example usage includes a composable such as useDocumentTitle that reacts to title changes, or a counter that accepts a MaybeRef<number> and updates it

Quick Start

Create a new composable that accepts a MaybeRef or Getter for inputs and uses toRef/toValue to normalize them inside a watcher to keep behavior reactive.

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 composable accept both reactive and non-reactive inputs?▼

You can create an adaptable composable by typing its parameters as MaybeRef or MaybeRefOrGetter and normalizing them using toValue() or toRef() inside reactive effects, allowing plain values, refs, or getters to be passed interchangeably.

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

toValue() unwraps MaybeRef or MaybeRefOrGetter arguments into plain values for read-only usage inside watchers, while toRef() converts them into a ref for writable reactive conversion paths and state synchronization.

Can I use a getter function as an input for a Nuxt 3 composable?▼

Yes, you can use a getter function as an input for a Nuxt 3 composable by typing the parameter as MaybeRefOrGetter and resolving it with toValue() or toRef() to maintain reactivity across your application logic.

What's the best way to handle writable reactive inputs in Vue 3 composition API?▼

The best way to handle writable reactive inputs in Vue 3 composition API is using toRef() to normalize MaybeRefOrGetter inputs, ensuring proper reactive conversion paths for双向 state updates like a counter composable.

Why does my Vue composable watcher not trigger when passing a plain value?▼

Your Vue composable watcher might not trigger because plain values lack reactivity, requiring you to normalize inputs via toValue() or toRef() so the watcher properly tracks MaybeRef or getter sources.

Related Skills

Explore More Software Engineering Skills→
stevessrstevessr

create-adaptable-composable

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

Community
Intermediate
IntelliTectIntelliTect

use-composition-api

Build Vue 3 components with the Composition API, TypeScript, and Vuetify.

Official
Intermediate
jaypatrickjaypatrick

create-adaptable-composable

Create Vue composables that normalize MaybeRef inputs with toRef and toValue.

Community
Intermediate
aiaihomeaiaihome

create-adaptable-composable

Normalize reactive and non-reactive inputs in Vue 3 composables with toRef() and toValue().

Community
Advanced