skills.rest
jd-solanki
jd-solankiCOMMUNITY
Explore all skills by this author →
Website𝕏@me_jd_solankiGitHub

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
One-click install
npx skills add https://github.com/jd-solanki/lekhan-internal-sync --skill create-adaptable-composable-jd-solanki
Or copy as Structured Prompt for Agent▼
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.

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