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

Developer Tools

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

About

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.

Key Features

Implements MaybeRef and MaybeRefOrGetter type patterns for flexible APIs
Configures watchers and effects for predictable reactive behavior
Enforces Vue 3 best practices for library-grade utility design
1,280 GitHub stars
Normalizes reactive inputs using Vue's toValue() and toRef() utilities
Distinguishes between read-only getters and two-way writable refs

Use Cases

Creating flexible UI state logic that supports both static values and computed refs
Developing reusable utility libraries for internal or open-source Vue projects
Refactoring legacy Vue composables to support modern, getter-based reactivity patterns

About

Key Features

Implements MaybeRef and MaybeRefOrGetter type patterns for flexible APIs
Configures watchers and effects for predictable reactive behavior
Enforces Vue 3 best practices for library-grade utility design
1,280 GitHub stars
Normalizes reactive inputs using Vue's toValue() and toRef() utilities
Distinguishes between read-only getters and two-way writable refs

Use Cases

Creating flexible UI state logic that supports both static values and computed refs
Developing reusable utility libraries for internal or open-source Vue projects
Refactoring legacy Vue composables to support modern, getter-based reactivity patterns