skills.rest
zuiaizengdada
zuiaizengdadaCOMMUNITY
Explore all skills by this author →
GitHub

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

Related Skills

Explore More Software Engineering Skills→
JeffallanJeffallan
10.9k

vue-expert

Guide Vue 3 development with Composition API, Pinia, and Nuxt 3.

Community
Advanced
slashwhyslashwhy
5

vue-composables

Implement Vue 3 composable patterns for reusable logic and reactive state.

Official
Intermediate
trcattrcat

create-adaptable-composable

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

Community
Basic
NgDuyKhanhsNgDuyKhanhs

create-adaptable-composable

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

Community
Intermediate