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開発

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.

主な機能

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

ユースケース

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

概要

主な機能

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

ユースケース

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