skills.rest
trcat
trcatCOMMUNITY
Explore all skills by this author →
GitHub

create-adaptable-composable

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

Updated Jan 29, 2026
Search Tags:#reactivity#Vue 3#composables#MaybeRef#toValue#toRef#adaptable
One-click install
npx skills add https://github.com/trcat/ai-todo-list --skill create-adaptable-composable-trcat
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-adaptable-composable
Source: https://github.com/trcat/ai-todo-list/tree/main/.agents/skills/create-adaptable-composable
Command: npx skills add https://github.com/trcat/ai-todo-list --skill create-adaptable-composable-trcat

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Traditional Vue composables often assume inputs are reactive, forcing callers to wrap values in refs or complicating usage across components. This skill provides a pattern to build adaptable Vue composables that can accept plain values, refs, or getters without breaking reactivity.

Core Features & Use Cases

  • Accepts MaybeRef or MaybeRefOrGetter inputs and normalizes them with toRef() or toValue() inside reactive effects.
  • Enables creating reusable utilities (e.g., a document title updater or counter) that work in both read-only and writable contexts.
  • Reduces boilerplate when consuming reactive data in Vue 3 and Nuxt 3 projects by providing a consistent API.

Quick Start

Create a composable that takes a MaybeRefOrGetter input and uses toRef/toValue to normalize the value, then reacts to changes with watch or watchEffect. For example, implement a simple useDocumentTitle-like helper that updates document.title based on the normalized input.

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 refs, getters, and plain values?▼

To make Vue 3 composables accept refs, getters, and plain values, use MaybeRefOrGetter types and normalize inputs with toValue() or toRef() inside watch or watchEffect effects to maintain reactivity.

What is the difference between toValue and toRef in Vue composables?▼

In Vue composables, toValue normalizes MaybeRefOrGetter inputs into plain values for reading, while toRef converts them into a ref for writable contexts, ensuring consistent reactive behavior across components.

How do I build a Nuxt 3 composable that reacts to changing ref inputs?▼

Build a Nuxt 3 composable by accepting MaybeRefOrGetter arguments and resolving them with toValue() inside a watchEffect, which automatically tracks dependencies and triggers updates when the underlying ref changes.

Can I use a getter function directly as an argument to a Vue composable?▼

Yes, you can pass a getter function directly to a Vue composable by typing the parameter as MaybeRefOrGetter and calling toValue() on it within reactive effects to evaluate the getter and track its dependencies.

When should I normalize composable inputs with toValue inside watchEffect?▼

Normalize composable inputs with toValue inside watchEffect when the composable must react to changes from plain values, refs, or getters, ensuring the effect re-runs whenever the underlying source updates without breaking reactivity.

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

angular-signals

Migrate Angular component state from BehaviorSubject to signals.

Community
Advanced
jd-solankijd-solanki

create-adaptable-composable

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

Community
Intermediate
NgDuyKhanhsNgDuyKhanhs

create-adaptable-composable

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

Community
Intermediate