When should I use MaybeRef versus MaybeRefOrGetter?

Use MaybeRef for two-way or writable data that needs to be modified within the composable. Use MaybeRefOrGetter for read-only values, especially when you want to support reactive computed properties or dynamic getter functions.

Is this skill compatible with Nuxt 3?

Yes, this skill follows the standard Vue 3 reactivity patterns used in both standalone Vue projects and Nuxt 3 frameworks.

What is an adaptable composable in Vue?

An adaptable composable is a reusable function designed to accept various input types—such as raw values, refs, or getter functions—allowing it to be used flexibly across different parts of an application without manual normalization.

How does this skill improve Vue 3 reactivity?

It ensures that Claude uses toValue() and toRef() correctly inside reactive effects like watch or watchEffect. This prevents common bugs where reactivity is lost when passing plain values or where getter functions aren't properly unwrapped.

Vue Adaptable Composables

Name: Vue Adaptable Composables
Author: vuejs-ai

byvuejs-ai

•

1,280

•

개발자 도구

Builds library-grade Vue 3 composables that seamlessly handle reactive and non-reactive inputs.

This skill empowers Claude to architect production-ready Vue 3 composables by implementing the adaptable pattern. It ensures functions can accept plain values, refs, or getters—using MaybeRef and MaybeRefOrGetter types—and correctly normalizes them using modern reactivity APIs like toValue() and toRef(). By standardizing how inputs are handled within watchers and effects, this skill helps developers create flexible, reusable logic that remains predictable and performant across diverse implementation contexts in Vue and Nuxt projects.

주요 기능

01Implements MaybeRef and MaybeRefOrGetter type patterns for flexible APIs

02Configures watchers and effects for predictable reactive behavior

03Enforces Vue 3 best practices for library-grade utility design

041,280 GitHub stars

05Normalizes reactive inputs using Vue's toValue() and toRef() utilities

06Distinguishes between read-only getters and two-way writable refs

사용 사례

01Creating flexible UI state logic that supports both static values and computed refs

02Developing reusable utility libraries for internal or open-source Vue projects

03Refactoring legacy Vue composables to support modern, getter-based reactivity patterns

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add vuejs-ai/skills create-adaptable-composable

For use in Claude.ai and ChatGPT

Download Skill