Nuxt Data

What it does

This skill provides guidance and reference materials for developing Nuxt 4 applications, specifically focusing on data management techniques. It offers information on composables, data fetching methods (like useFetch, useAsyncData, and $fetch), and state management patterns, including integration with Pinia. The goal is to help developers build robust and efficient frontend user interfaces within the Nuxt framework.

When to use it

• When building custom composables that manage complex application state.
• When debugging issues related to state management or reactivity in your Nuxt application.
• When implementing data fetching logic, especially when dealing with reactive parameters or pagination.
• When setting up and integrating Pinia for more advanced state management needs within a Nuxt project.

Key capabilities

• Data Fetching Methods: Provides details on useFetch, useAsyncData, and $fetch including their use cases, SSR support, caching behavior, and reactivity.
• Composable Naming Conventions: Offers guidance on naming conventions for composables (using prefixes like "use" and "fetch").
• useState Pattern: Explains how to create shared, reactive state using useState that persists across component instances (singleton pattern).
• Pinia Integration: Provides resources for setting up Pinia stores with getters, actions, and SSR support.
• Reference Materials: Includes references to specific documents covering composables, data fetching, and Pinia integration.

Example prompts

• "How do I use useFetch in Nuxt 4?"
• "What's the difference between useState and ref in Nuxt?"
• "Can you give me an example of integrating Pinia with SSR in a Nuxt application?"

Tips & gotchas

• Singleton vs. Per-Call Composables: Be mindful of whether your composable should be a singleton (shared across all components) or per-call. useState creates singletons.
• Reactivity Issues: Pay attention to shallow versus deep reactivity when implementing data fetching with reactive parameters. The skill's references can help troubleshoot these issues.
• SSR Considerations: When using browser APIs, ensure your patterns are SSR-safe as described in the references/composables.md document.