Does this cover Nuxt 3 data fetching composables?

Absolutely, it includes best practices for useFetch and useAsyncData, focusing on reactive parameter handling, unique key management, and preventing errors when called outside the setup context.

How does this skill help with hydration mismatches?

It identifies common causes like using browser-only APIs outside of the onMounted hook or inconsistent date rendering, and provides fixes using ClientOnly components or process.client guards.

Is it helpful for setting up local debugging tools?

Yes, it provides configuration snippets for VS Code launch settings, Nuxt DevTools enablement, and Node inspector commands to enhance your local development experience.

Can it help with server-side Nitro errors?

Yes, it provides patterns for proper error handling in event handlers using createError, and instructions for reading request bodies and query parameters correctly using readBody.

Nuxt.js Debugging & Refactoring

Name: Nuxt.js Debugging & Refactoring
Author: SnakeO

bySnakeO

開発者ツール

Systematically diagnoses and resolves Nuxt.js issues across SSR, hydration, Nitro server-side logic, and composables.

概要

This skill equips Claude with a comprehensive framework for debugging complex Nuxt.js applications. It provides structured patterns to solve common 'Hydration text/node mismatch' errors, handle SSR-specific API limitations, and optimize useFetch or useAsyncData implementations. By utilizing this skill, developers can quickly isolate errors between the client and server contexts, debug Nitro event handlers, and ensure robust plugin and module configurations, significantly reducing the time spent troubleshooting framework-specific quirks and runtime errors.

主な機能

SSR-aware debugging for browser-only API usage and lifecycle hooks
Nitro server engine and event handler error troubleshooting patterns
Hydration mismatch diagnosis and automated resolution strategies
0 GitHub stars
Reactive data fetching optimization for useFetch and useAsyncData
Comprehensive configuration for Nuxt DevTools and VS Code debugging environments

ユースケース

Resolving flickering content and hydration warnings in universal applications
Debugging 500 Internal Server Errors within server/api routes and Nitro middleware
Fixing 'useFetch is not defined' errors or stale data caching in composables

概要

主な機能

SSR-aware debugging for browser-only API usage and lifecycle hooks
Nitro server engine and event handler error troubleshooting patterns
Hydration mismatch diagnosis and automated resolution strategies
0 GitHub stars
Reactive data fetching optimization for useFetch and useAsyncData
Comprehensive configuration for Nuxt DevTools and VS Code debugging environments

ユースケース

Resolving flickering content and hydration warnings in universal applications
Debugging 500 Internal Server Errors within server/api routes and Nitro middleware
Fixing 'useFetch is not defined' errors or stale data caching in composables