---
name: "nuxt-3-composables-auto-import"
description: "Eliminate boilerplate imports and handle SSR data fetching with useAsyncData and useFetch."
metadata:
  author: "Nuxt"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "usefetch in nuxt 3"
  - "ssr data fetching useasyncdata"
  - "refresh nuxt usefetch data"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# Nuxt 3 Auto-Imports, useAsyncData & useFetch

Implements Nuxt 3 data fetching: useFetch with deduplication keys, useAsyncData with transform functions, lazy fetching (useLazyFetch), refresh triggers, and managing auto-imported components and composables.

## When to Invoke
Invoke this skill whenever you need to:
- usefetch in nuxt 3
- ssr data fetching useasyncdata
- refresh nuxt usefetch data

## Execution SOP & Rules
1. Use useFetch('/api/data', { key: 'unique-key', transform: data => data.items }).
2. Use useLazyFetch when you want navigation to happen immediately while content streams in.
3. Always provide a unique key when fetching dynamically inside loops or with query parameters.
4. Rely on Nuxt auto-imports for Vue APIs (ref, computed) and local composables under composables/.

## Verification Checklist
- Run local linting, syntax validation, and type-checks before reporting completion.
- Ensure all created or modified files adhere to workspace boundaries and avoid uncommitted secrets.
- Verify tests or build commands exit cleanly with return code 0.