create-adaptable-composable

Build Vue 3 composables accepting reactive and non-reactive inputs.

Updated Feb 7, 2026

Search Tags:#Vue #reactivity #composables #MaybeRef #toValue #toRef #adaptable

Ready to run

npx skills add https://github.com/jd-solanki/lekhan-internal-sync --skill create-adaptable-composable-jd-solanki

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: create-adaptable-composable
Source: https://github.com/jd-solanki/lekhan-internal-sync/tree/main/.agents/skills/create-adaptable-composable
Command: npx skills add https://github.com/jd-solanki/lekhan-internal-sync --skill create-adaptable-composable-jd-solanki

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Adaptable composables enable Vue developers to create reusable APIs that work with both reactive values (refs, computed) and plain values, reducing boilerplate and integration friction.

Core Features & Use Cases

Accepts MaybeRef or MaybeRefOrGetter inputs to support value, ref, or getter-based APIs
Normalizes inputs inside reactive effects with toValue() or toRef() to ensure consistent behavior
Demonstrates use cases like a generic counter or a document title hook that can be used in both read-only and writable contexts

Quick Start

Define a composable that takes MaybeRefOrGetter<string> and uses toRef() to derive a reactive source, then reacts to changes with watch.

Frequently Asked Questions about create-adaptable-composable

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

FAQPage Schema

How do I build Vue composables that accept both refs and plain values?▼

Build adaptable Vue composables by accepting MaybeRefOrGetter inputs and normalizing them with toRef or toValue inside reactive effects. This ensures your composable API consistently processes plain values, refs, and getters without integration friction.

When should I use toValue or toRef inside a Vue composable?▼

Use toValue or toRef inside Vue composables when you need to normalize MaybeRefOrGetter inputs within watch or watchEffect. This resolves reactive and non-reactive sources into consistent values, maintaining reliable reactivity across your components.

How do I make a Vue 3 composable reusable across different input types?▼

Make a Vue 3 composable reusable by defining its parameters as MaybeRefOrGetter and resolving them with toRef. This allows the same composable to adapt to plain values, computed refs, or getter functions across your application.

Does this approach for adaptable composables work with Nuxt 3 projects?▼

Yes, this approach works with Nuxt 3 projects. The technique of resolving MaybeRefOrGetter inputs with toValue or toRef applies to both Vue 3 and Nuxt 3 to create adaptable APIs for libraries and components.

What is the difference between MaybeRef and MaybeRefOrGetter in Vue composables?▼

MaybeRef accepts plain values or refs, while MaybeRefOrGetter extends this to include getter functions. Using MaybeRefOrGetter with toValue provides maximum flexibility, allowing your composable to react to any reactive or static source.

Why does my Vue composable fail to update when passing a getter function?▼

A Vue composable fails to update if it does not normalize getter functions using toValue or toRef inside watch or watchEffect. Resolving MaybeRefOrGetter inputs ensures the reactive effect properly tracks the getter's dependencies.