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

•

Desarrollo de API

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

Acerca de

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.

Características Principales

Advanced data strategies including transformation, field picking, and deduplication
Guidance on Nuxt 4 shallow vs deep reactivity and hydration troubleshooting
SSR-safe state management patterns using useState and singleton composables
Standardized implementation of useFetch and useAsyncData with reactive parameters
21 GitHub stars
Production-ready Pinia store configurations with getters and actions

Casos de Uso

Managing global application state with Pinia while maintaining SSR consistency
Implementing performant API integrations with pagination, search, and lazy loading
Building complex authentication flows with shared state across the application

Acerca de

Características Principales

Advanced data strategies including transformation, field picking, and deduplication
Guidance on Nuxt 4 shallow vs deep reactivity and hydration troubleshooting
SSR-safe state management patterns using useState and singleton composables
Standardized implementation of useFetch and useAsyncData with reactive parameters
21 GitHub stars
Production-ready Pinia store configurations with getters and actions

Casos de Uso

Managing global application state with Pinia while maintaining SSR consistency
Implementing performant API integrations with pagination, search, and lazy loading
Building complex authentication flows with shared state across the application