skills.rest
NKDShinKu
NKDShinKuCOMMUNITY
Explore all skills by this author →
GitHub

create-adaptable-composable

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

Updated Dec 30, 2025
Search Tags:#reactivity#composable#Vue3#MaybeRef#toValue#toRef#adaptable
One-click install
npx skills add https://github.com/NKDShinKu/NKDShinKu --skill create-adaptable-composable
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-adaptable-composable
Source: https://github.com/NKDShinKu/NKDShinKu/tree/main/.agents/skills/create-adaptable-composable
Command: npx skills add https://github.com/NKDShinKu/NKDShinKu --skill create-adaptable-composable

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Developers often need composables that can accept both reactive and non-reactive inputs (MaybeRef / MaybeRefOrGetter) and normalize them inside reactive effects to keep behavior predictable. This Skill provides a reusable pattern for building library-grade Vue composables that gracefully handle plain values, refs, or getter functions.

Core Features & Use Cases

  • Normalize inputs with toRef() or toValue() inside watch/watchEffect to ensure consistent reactivity.
  • Support both one-way and two-way input scenarios via MaybeRef / MaybeRefOrGetter patterns.
  • Real-world use: building a "useDocumentTitle" or "useCounter" style composable that remains API-friendly across different input types.

Quick Start

Create a new composable that accepts a parameter which can be a plain value, a Ref, or a getter function, and implement input normalization inside a watch or watchEffect using toRef() and toValue().

Frequently Asked Questions about create-adaptable-composable

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

FAQPage Schema
How do I normalize Vue composable inputs to accept refs, getters, and plain values?▼

Normalize Vue composable inputs using toRef() and toValue() inside watch or watchEffect loops to resolve MaybeRef or MaybeRefOrGetter parameters into predictable reactive states.

What is the best way to build a Vue 3 composable that handles both reactive and non-reactive arguments?▼

Building adaptable Vue 3 composables requires wrapping parameters with toRef() or evaluating them via toValue() inside watch sources, ensuring stable reactivity across plain values, refs, and getters.

Why does my Vue watchEffect not track changes when I pass a getter function to a composable?▼

Vue watchEffect fails to track getter functions if they are not normalized properly; resolving the input with toValue() ensures the reactive effect registers the underlying dependency correctly.

Does this approach to normalizing reactive inputs work with Nuxt 3 projects?▼

Yes, normalizing reactive inputs with toRef() and toValue() applies directly to Vue 3 and Nuxt 3 projects, enabling composables to gracefully handle diverse input types like plain values and refs.

When do I need to use MaybeRefOrGetter patterns in my web application?▼

Use MaybeRefOrGetter patterns when building library-grade composables that require flexible APIs, allowing consumers to pass static values, refs, or computed getters without breaking reactive behavior.

Related Skills

Explore More Software Engineering Skills→
NKDShinKuNKDShinKu

create-adaptable-composable

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

Community
Advanced
trcattrcat

create-adaptable-composable

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

Community
Basic
jaypatrickjaypatrick

create-adaptable-composable

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

Community
Intermediate
NgDuyKhanhsNgDuyKhanhs

create-adaptable-composable

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

Community
Intermediate