How does this skill handle SSR (Server-Side Rendering)?

The skill provides specific patterns such as 'isClient' checks and 'onMounted' wrapping to ensure browser-only APIs don't break during server-side execution.

Does this skill support Nuxt projects?

Yes, it includes specific guidance for the @vueuse/nuxt module, including auto-import configurations and SSR-safe implementation patterns.

Which version of VueUse does this skill cover?

It is optimized for VueUse 14.x, targeting Vue 3.5 and above.

Why use this skill instead of writing custom composables?

VueUse utilities are battle-tested, edge-case handled, and highly optimized. This skill ensures Claude uses these existing patterns rather than generating redundant, less robust code.

VueUse Composables

Name: VueUse Composables
Author: onmax

byonmax

•

410

•

开发者工具

Provides a comprehensive suite of reactive Vue utilities for browser APIs, state management, sensors, and animations.

This skill empowers Claude to efficiently implement the VueUse library, a collection of essential Vue Composition utilities. It helps developers avoid reinventing the wheel by providing standardized patterns for over 200 composables, covering everything from local storage persistence and mouse tracking to complex network requests and SSR-safe browser interactions. By using this skill, Claude can write more idiomatic Vue 3 and Nuxt code, ensuring high performance and following best practices for reactivity and component lifecycle management.

主要功能

01Optimized patterns for state persistence using useLocalStorage and useSessionStorage

02Guidance on element sensors including intersection observers and resize observers

03Best practices for SSR-safe browser API implementations

04Streamlined integration for Nuxt modules and auto-import configurations

05410 GitHub stars

06Access to 200+ pre-built reactive utilities for Vue and Nuxt

使用场景

01Creating complex reactive UI elements based on mouse position, scroll, or element size

02Implementing debounced or throttled watchers to optimize application performance

03Syncing component state with browser storage or URL parameters automatically

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add onmax/nuxt-skills vueuse

For use in Claude.ai and ChatGPT

Download Skill