skills.rest
a35506322
a35506322COMMUNITY
Explore all skills by this author →
GitHub

create-adaptable-composable

Normalize reactive and non-reactive Vue composable inputs with toValue() and toRef().

1|Updated Jan 25, 2026
Search Tags:#typescript#frontend#vue#reactivity#nuxt#composable#reusable
One-click install
npx skills add https://github.com/a35506322/Lab.Todo --skill create-adaptable-composable-a35506322
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-adaptable-composable
Source: https://github.com/a35506322/Lab.Todo/tree/main/.cursor/skills/create-adaptable-composable
Command: npx skills add https://github.com/a35506322/Lab.Todo --skill create-adaptable-composable-a35506322

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Standard Vue composables often only accept reactive inputs, forcing developers to manually wrap plain values, refs, or getter functions in refs to use them, which adds unnecessary boilerplate and risks reactivity bugs. This Skill eliminates that friction by enabling composables to natively accept both reactive and non-reactive inputs.

Core Features & Use Cases

  • Flexible Input Support: Accepts plain values, refs, computed refs, and getter functions as composable parameters using Vue's MaybeRef and MaybeRefOrGetter type utilities.
  • Predictable Reactivity: Normalizes inputs with toValue() and toRef() inside reactive effects to ensure consistent reactive behavior regardless of input type.
  • Use Case: Build a reusable useCounter composable that works with both a plain number count and a ref holding the count, so callers don't need to adjust their code based on their reactivity setup.

Quick Start

Use the create-adaptable-composable skill to build a reusable useTheme composable that accepts both a plain theme string and a ref holding the current theme value to sync with browser preferences.

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

Make a Vue composable accept both refs and plain values by typing parameters with MaybeRefOrGetter and normalizing them using Vue's toValue() and toRef() utilities inside reactive effects.

Why does my Vue composable lose reactivity when I pass a getter function?▼

Your Vue composable loses reactivity because the getter function is not normalized inside a reactive effect. Using Vue's toValue() within watchEffect or computed ensures the getter is tracked reactively.

What's the best way to build reusable Nuxt 3 composables for different reactivity contexts?▼

The best way to build reusable Nuxt 3 composables is to normalize inputs with toRef() and toValue(), ensuring the composable works predictably whether callers pass plain values, refs, or getters.

Does Vue 3 toValue() eliminate manual ref wrapping in composable inputs?▼

Yes, Vue 3 toValue() eliminates manual ref wrapping by normalizing MaybeRefOrGetter inputs inside reactive effects, allowing callers to pass plain values or getters directly without boilerplate.

When do I need to use MaybeRefOrGetter in TypeScript Vue composables?▼

Use MaybeRefOrGetter in TypeScript Vue composables when you want to create library-grade reusable functions that flexibly accept reactive refs, computed refs, or non-reactive plain values without forcing callers to adjust their code.

Related Skills

Explore More Software Engineering Skills→
stevessrstevessr

vue-development-guides

Provide centralized Vue 3 and Nuxt 3 development best practices and references.

Community
Intermediate
stevessrstevessr

create-adaptable-composable

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

Community
Intermediate
janpeterdjanpeterd

tanstack-store

Implement immutable reactive state management with TanStack store primitives.

Community
Intermediate
mymx2mymx2
4

create-adaptable-composable

Standardize Vue.js composable inputs with MaybeRef and MaybeRefOrGetter patterns.

Community
Intermediate