What is the difference between useState and ref in Nuxt 4?

useState creates SSR-safe, shared reactive state that persists across component instances, acting as a singleton. In contrast, ref creates a new instance every time it is called within a composable, making it unsuitable for shared global state.

Is this skill compatible with Pinia?

Absolutely. It provides standardized patterns for integrating Pinia stores into Nuxt 4 applications, including setup for stores, getters, and actions that work seamlessly with Server-Side Rendering.

How does this skill handle Nuxt 4's default shallow reactivity?

The skill provides patterns to enable deep reactivity using the 'deep: true' option in useFetch or through manual refresh strategies to ensure the UI updates correctly after nested data mutations.

Can I use this skill to implement lazy loading?

Yes, it includes specific guidance for useLazyFetch and useLazyAsyncData, allowing for immediate page navigation while data loads in the background to improve perceived performance.

Nuxt 4 Data & State Management

Name: Nuxt 4 Data & State Management
Author: secondsky

bysecondsky

•

API Development

Optimizes Nuxt 4 data fetching and state management using production-ready composables and SSR-safe implementation patterns.

This skill provides a comprehensive toolkit for handling data and state within Nuxt 4 applications, ensuring best practices for performance and SSR compatibility. It guides the implementation of reactive data fetching with useFetch and useAsyncData, provides patterns for shared state using useState, and facilitates complex state management with Pinia integration. By enforcing patterns like singleton composables and addressing Nuxt 4's specific reactivity behaviors, this skill helps developers avoid common pitfalls such as hydration mismatches and memory leaks while optimizing for type safety and speed.

Key Features

01Advanced data strategies including transformation, field picking, and deduplication

02Guidance on Nuxt 4 shallow vs deep reactivity and hydration troubleshooting

03SSR-safe state management patterns using useState and singleton composables

04Standardized implementation of useFetch and useAsyncData with reactive parameters

0521 GitHub stars

06Production-ready Pinia store configurations with getters and actions

Use Cases

01Managing global application state with Pinia while maintaining SSR consistency

02Implementing performant API integrations with pagination, search, and lazy loading

03Building complex authentication flows with shared state across the application

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add secondsky/claude-skills nuxt-data

For use in Claude.ai and ChatGPT

Download Skill