create-adaptable-composable

Design Vue 3 composables that normalize MaybeRef or Getter inputs with toValue() or toRef().

9|Updated Sep 4, 2024

Search Tags:#Vue 3 #composable #MaybeRef #toValue #toRef #adaptable #MaybeRefOrGetter

Ready to run

npx skills add https://github.com/zuiaizengdada/uniapp_vue3_vite_pinia_template --skill create-adaptable-composable-zuiaizengdada

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: create-adaptable-composable
Source: https://github.com/zuiaizengdada/uniapp_vue3_vite_pinia_template/tree/main/.agents/skills/create-adaptable-composable
Command: npx skills add https://github.com/zuiaizengdada/uniapp_vue3_vite_pinia_template --skill create-adaptable-composable-zuiaizengdada

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Developers often build composables that must work with both plain values and reactive inputs. This skill guides you to create adaptable Vue 3 composables that seamlessly handle MaybeRef and MaybeRefOrGetter inputs, reducing boilerplate and errors.

Core Features & Use Cases

Accepts plain values, Ref, or Getter and normalizes them with toValue() or toRef() inside reactive effects.
Ensures predictable reactivity when the input source changes, making composables safer to reuse across components.
Use Case: Create a counter or form state helper that can operate with a direct value or a Ref without changing the API.

Quick Start

Create an adaptable composable named useCounter that accepts MaybeRef<number> and exposes increment and reset functions.

Frequently Asked Questions about create-adaptable-composable

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

FAQPage Schema

How do I create a Vue 3 composable that accepts both plain values and refs?▼

To create a Vue 3 composable that accepts both plain values and refs, define the input parameter as MaybeRef or MaybeRefOrGetter, then normalize it using toValue() or toRef() inside reactive effects to ensure predictable behavior.

What is MaybeRefOrGetter in Vue 3 composables?▼

MaybeRefOrGetter is a TypeScript type in Vue 3 that allows a composable to accept a plain value, a Ref, or a Getter function. It provides flexibility by letting developers pass static values or reactive sources interchangeably into composable APIs.

When do I need to use toValue or toRef inside a Vue composable?▼

You need to use toValue or toRef inside a Vue composable when processing MaybeRef inputs within reactive effects like watch or watchEffect. Normalizing inputs there keeps reactivity predictable when the underlying source changes.

Can I use this adaptable composable pattern in Nuxt 3 projects?▼

Yes, you can use this adaptable composable pattern in Nuxt 3 projects. The design targets Vue 3 Composition API applications and Nuxt 3-style apps where composables must reliably work with Getter or MaybeRef inputs.

Why does my Vue composable lose reactivity when passing a getter?▼

A Vue composable loses reactivity when passing a getter if the input is not normalized correctly. Using toValue() or toRef() inside watch or watchEffect ensures the composable tracks the getter's dependencies properly.