[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6FGQW25PMC10YNKJMP1T6GC":3,"skill-same:01M6FGQW25PMC10YNKJMP1T6GC":89},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":38,"linkOnly":39,"markdownContent":40,"markdownBody":41,"frontMatter":42,"refName":50,"commitSha":51,"skillDirectory":52,"forksCount":53,"repositoryHtmlUrl":54,"repositoryHomepageUrl":55,"ownerHtmlUrl":56,"ownerBlogUrl":6,"ownerDescription":57,"updatedAt":58,"install":59,"resources":72},"01M6FGQW25PMC10YNKJMP1T6GC","nuxt-data",null,"Nuxt 5 data management with useFetch, useAsyncData, useState, and Pinia. Use when creating composables, fetching data, managing state, or debugging reactive\u002FSSR data issues.","ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",67,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fsecondsky\u002Fclaude-skills\u002Fnuxt-data-nuxt-v5\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000033","数据分析师","PROFESSION","适用职业",[24,25,26,27,28,29,30,31,32,33,34,35,36,37],"data","nuxt","nuxt data","ssr","debugging","state","issues","framework","pinia","management","use","maintainers","data management","with","2026-11-10 10:12:30",false,"---\nname: nuxt-data\ndescription: Nuxt 5 data management with useFetch, useAsyncData, useState, and Pinia. Use when creating composables, fetching data, managing state, or debugging reactive\u002FSSR data issues.\nlicense: MIT\nmetadata:\n  version: 5.0.0\n  author: Claude Skills Maintainers\n  category: Framework\n  framework: Nuxt\n  framework-version: 5.x\n  last-verified: 2026-03-30\n---\n\n# Nuxt 5 Data Management\n\nComposables, data fetching, and state management patterns for Nuxt 5 applications.\n\n**Use when**: creating custom composables, fetching data with useFetch or useAsyncData, managing global state with useState, integrating Pinia, debugging reactive data issues, or implementing SSR-safe state patterns.\n\n## Quick Reference\n\n### Data Fetching Methods\n\n| Method | Use Case | SSR | Caching | Reactive |\n|--------|----------|-----|---------|----------|\n| `useFetch` | Simple API calls | Yes | Yes | Yes |\n| `useAsyncData` | Custom async logic | Yes | Yes | Yes |\n| `$fetch` | Client-side only, events | No | No | No |\n\n## When to Load References\n\n**Load `references\u002Fcomposables.md` when:**\n- Writing custom composables with complex state\n- Debugging state management issues or memory leaks\n- Implementing SSR-safe patterns with browser APIs\n- Building authentication or complex state composables\n\n**Load `references\u002Fdata-fetching.md` when:**\n- Implementing API data fetching with reactive parameters\n- Troubleshooting shallow vs deep reactivity issues\n- Debugging data not refreshing when params change\n- Implementing pagination, infinite scroll, or search\n\n## Composables\n\n### useState - The Foundation\n\n`useState` creates SSR-safe, shared reactive state that persists across component instances.\n\n```typescript\n\u002F\u002F composables\u002FuseCounter.ts\nexport const useCounter = () => {\n  const count = useState('counter', () => 0)\n\n  const increment = () => count.value++\n  const decrement = () => count.value--\n  const reset = () => count.value = 0\n\n  return { count, increment, decrement, reset }\n}\n```\n\n### useState vs ref - Critical Distinction\n\n```typescript\n\u002F\u002F CORRECT: Shared state (singleton pattern)\nexport const useAuth = () => {\n  const user = useState('auth-user', () => null)\n  return { user }\n}\n\n\u002F\u002F WRONG: Creates new instance every call!\nexport const useAuth = () => {\n  const user = ref(null)\n  return { user }\n}\n```\n\n**Rule**: Use `useState` for shared\u002Fglobal state. Use `ref` for local component state only.\n\n### clearNuxtState Resets to Defaults (v5 Change)\n\n```typescript\n\u002F\u002F Nuxt 5: clearNuxtState resets state to its initial value, not undefined\nconst count = useState('counter', () => 42)\ncount.value = 100\n\nclearNuxtState('counter')\n\u002F\u002F count.value is now 42 (the initial default), not undefined\n```\n\n### Complete Authentication Composable\n\n```typescript\n\u002F\u002F composables\u002FuseAuth.ts\nexport const useAuth = () => {\n  const user = useState\u003CUser | null>('auth-user', () => null)\n  const isAuthenticated = computed(() => !!user.value)\n  const isLoading = useState('auth-loading', () => false)\n\n  const login = async (email: string, password: string) => {\n    isLoading.value = true\n    try {\n      const data = await $fetch('\u002Fapi\u002Fauth\u002Flogin', {\n        method: 'POST',\n        body: { email, password }\n      })\n      user.value = data.user\n      return { success: true }\n    } catch (error) {\n      return { success: false, error: error.message }\n    } finally {\n      isLoading.value = false\n    }\n  }\n\n  const logout = async () => {\n    await $fetch('\u002Fapi\u002Fauth\u002Flogout', { method: 'POST' })\n    user.value = null\n    navigateTo('\u002Flogin')\n  }\n\n  const checkSession = async () => {\n    if (import.meta.server) return\n    try {\n      const data = await $fetch('\u002Fapi\u002Fauth\u002Fsession')\n      user.value = data.user\n    } catch {\n      user.value = null\n    }\n  }\n\n  return { user, isAuthenticated, isLoading, login, logout, checkSession }\n}\n```\n\n### SSR-Safe Browser APIs\n\n```typescript\n\u002F\u002F composables\u002FuseLocalStorage.ts\nexport const useLocalStorage = \u003CT>(key: string, defaultValue: T) => {\n  const data = useState\u003CT>(key, () => defaultValue)\n\n  if (import.meta.client) {\n    const stored = localStorage.getItem(key)\n    if (stored) {\n      data.value = JSON.parse(stored)\n    }\n\n    watch(data, (newValue) => {\n      localStorage.setItem(key, JSON.stringify(newValue))\n    }, { deep: true })\n  }\n\n  return data\n}\n```\n\n## Data Fetching\n\n### useFetch - Basic Usage\n\n```typescript\nconst { data, error, pending, refresh } = await useFetch('\u002Fapi\u002Fusers')\n\nconst { data: users } = await useFetch('\u002Fapi\u002Fusers', {\n  method: 'GET',\n  query: { limit: 10, offset: 0 },\n  headers: { 'X-Custom-Header': 'value' }\n})\n```\n\n### Reactive Parameters\n\n```vue\n\u003Cscript setup lang=\"ts\">\nconst page = ref(1)\nconst search = ref('')\n\nconst { data: users, pending } = await useFetch('\u002Fapi\u002Fusers', {\n  query: {\n    page,\n    search,\n    limit: 10\n  }\n})\n\u003C\u002Fscript>\n```\n\n### Transform Data\n\n```typescript\nconst { data: userNames } = await useFetch('\u002Fapi\u002Fusers', {\n  transform: (users) => users.map(u => u.name)\n})\n```\n\n### useAsyncData - Custom Logic\n\n```typescript\nconst { data } = await useAsyncData('dashboard', async () => {\n  const [users, posts, stats] = await Promise.all([\n    $fetch('\u002Fapi\u002Fusers'),\n    $fetch('\u002Fapi\u002Fposts'),\n    $fetch('\u002Fapi\u002Fstats')\n  ])\n  return { users, posts, stats }\n})\n```\n\n### Error Handling\n\n```typescript\nconst { data, error, status } = await useFetch('\u002Fapi\u002Fusers')\n\nif (error.value) {\n  console.error('Error:', error.value.message)\n  console.error('Status:', error.value.statusCode)\n}\n\nif (status.value === 'error') {\n  showError(error.value)\n}\n```\n\n### Manual Refresh\n\n```typescript\nconst { data, refresh, execute } = await useFetch('\u002Fapi\u002Fusers', {\n  immediate: false\n})\n\nawait execute()\nawait refresh()\nawait refresh({ dedupe: true })\n```\n\n### Shallow vs Deep Reactivity\n\n```typescript\n\u002F\u002F Nuxt 5 default: Shallow reactivity\nconst { data } = await useFetch('\u002Fapi\u002Fuser')\ndata.value.name = 'New Name'  \u002F\u002F Won't trigger reactivity!\n\n\u002F\u002F Enable deep reactivity for mutations\nconst { data } = await useFetch('\u002Fapi\u002Fuser', {\n  deep: true\n})\ndata.value.name = 'New Name'  \u002F\u002F Now works!\n\n\u002F\u002F Or refresh instead of mutating\nconst { data, refresh } = await useFetch('\u002Fapi\u002Fuser')\nawait $fetch('\u002Fapi\u002Fuser', { method: 'PATCH', body: { name: 'New Name' } })\nawait refresh()\n```\n\n### Caching and Deduplication\n\n```typescript\nconst { data } = await useFetch('\u002Fapi\u002Fusers', {\n  key: 'users-list',\n  dedupe: 'cancel',\n  getCachedData: (key, nuxtApp) => {\n    return nuxtApp.payload.data[key]\n  }\n})\n```\n\n### Lazy Loading Data\n\n```typescript\nconst { data, pending } = useLazyFetch('\u002Fapi\u002Fusers')\nconst { data: data2, pending: pending2 } = useLazyAsyncData('users', () => $fetch('\u002Fapi\u002Fusers'))\n```\n\n### $fetch - Client-Side Only\n\n```typescript\nconst submitForm = async () => {\n  const result = await $fetch('\u002Fapi\u002Fsubmit', {\n    method: 'POST',\n    body: formData.value\n  })\n}\n```\n\n## State Management\n\n### Shared Cart Example\n\n```typescript\n\u002F\u002F composables\u002FuseCart.ts\ninterface CartItem {\n  id: string\n  name: string\n  price: number\n  quantity: number\n}\n\nexport const useCart = () => {\n  const items = useState\u003CCartItem[]>('cart-items', () => [])\n\n  const total = computed(() =>\n    items.value.reduce((sum, item) => sum + item.price * item.quantity, 0)\n  )\n\n  const addItem = (product: Omit\u003CCartItem, 'quantity'>) => {\n    const existing = items.value.find(i => i.id === product.id)\n    if (existing) {\n      existing.quantity++\n    } else {\n      items.value.push({ ...product, quantity: 1 })\n    }\n  }\n\n  const removeItem = (id: string) => {\n    items.value = items.value.filter(i => i.id !== id)\n  }\n\n  const clearCart = () => {\n    items.value = []\n  }\n\n  return { items, total, addItem, removeItem, clearCart }\n}\n```\n\n### Pinia Integration\n\n```bash\nbun add pinia @pinia\u002Fnuxt\n```\n\n```typescript\n\u002F\u002F nuxt.config.ts\nexport default defineNuxtConfig({\n  modules: ['@pinia\u002Fnuxt']\n})\n\n\u002F\u002F stores\u002Fauth.ts\nimport { defineStore } from 'pinia'\n\nexport const useAuthStore = defineStore('auth', {\n  state: () => ({\n    user: null as User | null,\n    token: null as string | null\n  }),\n\n  getters: {\n    isAuthenticated: (state) => !!state.user,\n    userName: (state) => state.user?.name ?? 'Guest'\n  },\n\n  actions: {\n    async login(email: string, password: string) {\n      const { user, token } = await $fetch('\u002Fapi\u002Fauth\u002Flogin', {\n        method: 'POST',\n        body: { email, password }\n      })\n      this.user = user\n      this.token = token\n    },\n\n    logout() {\n      this.user = null\n      this.token = null\n    }\n  }\n})\n```\n\n## Common Anti-Patterns\n\n### Using ref Instead of useState\n\n```typescript\n\u002F\u002F WRONG\nexport const useAuth = () => {\n  const user = ref(null)\n  return { user }\n}\n\n\u002F\u002F CORRECT\nexport const useAuth = () => {\n  const user = useState('auth-user', () => null)\n  return { user }\n}\n```\n\n### Non-Deterministic Transform\n\n```typescript\n\u002F\u002F WRONG - Causes hydration mismatch!\nconst { data } = await useFetch('\u002Fapi\u002Fusers', {\n  transform: (users) => users.sort(() => Math.random() - 0.5)\n})\n\n\u002F\u002F CORRECT\nconst { data } = await useFetch('\u002Fapi\u002Fusers', {\n  transform: (users) => users.sort((a, b) => a.name.localeCompare(b.name))\n})\n```\n\n### Mutating Shallow Refs\n\n```typescript\n\u002F\u002F WRONG\nconst { data } = await useFetch('\u002Fapi\u002Fuser')\ndata.value.name = 'New Name'\n\n\u002F\u002F CORRECT - Enable deep\nconst { data } = await useFetch('\u002Fapi\u002Fuser', { deep: true })\n\n\u002F\u002F CORRECT - Replace entire value\ndata.value = { ...data.value, name: 'New Name' }\n\n\u002F\u002F CORRECT - Refresh after mutation\nawait $fetch('\u002Fapi\u002Fuser', { method: 'PATCH', body: { name: 'New Name' } })\nawait refresh()\n```\n\n## Troubleshooting\n\n**Data Not Refreshing When Params Change:**\n- Ensure params are reactive: `{ query: { page } }` where `page = ref(1)`\n- Check you're using the ref itself, not `.value`\n\n**Hydration Mismatch with useState:**\n- Ensure key is unique: `useState('unique-key', () => value)`\n- Avoid `Math.random()` or `Date.now()` in initial values\n\n**State Lost on Navigation:**\n- Use `useState` instead of `ref` for persistent state\n\n**clearNuxtState not working as expected:**\n- v5 resets to initial default value, not `undefined`\n- Check that the initial factory function returns the expected default\n\n## Related Skills\n\n- **nuxt-core**: Project setup, routing, configuration\n- **nuxt-server**: Server routes, API patterns (Nitro v3)\n- **nuxt-production**: Performance, testing, deployment\n\n---\n\n**Version**: 5.0.0 | **Last Updated**: 2026-03-30 | **License**: MIT\n","# Nuxt 5 Data Management\n\nComposables, data fetching, and state management patterns for Nuxt 5 applications.\n\n**Use when**: creating custom composables, fetching data with useFetch or useAsyncData, managing global state with useState, integrating Pinia, debugging reactive data issues, or implementing SSR-safe state patterns.\n\n## Quick Reference\n\n### Data Fetching Methods\n\n| Method | Use Case | SSR | Caching | Reactive |\n|--------|----------|-----|---------|----------|\n| `useFetch` | Simple API calls | Yes | Yes | Yes |\n| `useAsyncData` | Custom async logic | Yes | Yes | Yes |\n| `$fetch` | Client-side only, events | No | No | No |\n\n## When to Load References\n\n**Load `references\u002Fcomposables.md` when:**\n- Writing custom composables with complex state\n- Debugging state management issues or memory leaks\n- Implementing SSR-safe patterns with browser APIs\n- Building authentication or complex state composables\n\n**Load `references\u002Fdata-fetching.md` when:**\n- Implementing API data fetching with reactive parameters\n- Troubleshooting shallow vs deep reactivity issues\n- Debugging data not refreshing when params change\n- Implementing pagination, infinite scroll, or search\n\n## Composables\n\n### useState - The Foundation\n\n`useState` creates SSR-safe, shared reactive state that persists across component instances.\n\n```typescript\n\u002F\u002F composables\u002FuseCounter.ts\nexport const useCounter = () => {\n  const count = useState('counter', () => 0)\n\n  const increment = () => count.value++\n  const decrement = () => count.value--\n  const reset = () => count.value = 0\n\n  return { count, increment, decrement, reset }\n}\n```\n\n### useState vs ref - Critical Distinction\n\n```typescript\n\u002F\u002F CORRECT: Shared state (singleton pattern)\nexport const useAuth = () => {\n  const user = useState('auth-user', () => null)\n  return { user }\n}\n\n\u002F\u002F WRONG: Creates new instance every call!\nexport const useAuth = () => {\n  const user = ref(null)\n  return { user }\n}\n```\n\n**Rule**: Use `useState` for shared\u002Fglobal state. Use `ref` for local component state only.\n\n### clearNuxtState Resets to Defaults (v5 Change)\n\n```typescript\n\u002F\u002F Nuxt 5: clearNuxtState resets state to its initial value, not undefined\nconst count = useState('counter', () => 42)\ncount.value = 100\n\nclearNuxtState('counter')\n\u002F\u002F count.value is now 42 (the initial default), not undefined\n```\n\n### Complete Authentication Composable\n\n```typescript\n\u002F\u002F composables\u002FuseAuth.ts\nexport const useAuth = () => {\n  const user = useState\u003CUser | null>('auth-user', () => null)\n  const isAuthenticated = computed(() => !!user.value)\n  const isLoading = useState('auth-loading', () => false)\n\n  const login = async (email: string, password: string) => {\n    isLoading.value = true\n    try {\n      const data = await $fetch('\u002Fapi\u002Fauth\u002Flogin', {\n        method: 'POST',\n        body: { email, password }\n      })\n      user.value = data.user\n      return { success: true }\n    } catch (error) {\n      return { success: false, error: error.message }\n    } finally {\n      isLoading.value = false\n    }\n  }\n\n  const logout = async () => {\n    await $fetch('\u002Fapi\u002Fauth\u002Flogout', { method: 'POST' })\n    user.value = null\n    navigateTo('\u002Flogin')\n  }\n\n  const checkSession = async () => {\n    if (import.meta.server) return\n    try {\n      const data = await $fetch('\u002Fapi\u002Fauth\u002Fsession')\n      user.value = data.user\n    } catch {\n      user.value = null\n    }\n  }\n\n  return { user, isAuthenticated, isLoading, login, logout, checkSession }\n}\n```\n\n### SSR-Safe Browser APIs\n\n```typescript\n\u002F\u002F composables\u002FuseLocalStorage.ts\nexport const useLocalStorage = \u003CT>(key: string, defaultValue: T) => {\n  const data = useState\u003CT>(key, () => defaultValue)\n\n  if (import.meta.client) {\n    const stored = localStorage.getItem(key)\n    if (stored) {\n      data.value = JSON.parse(stored)\n    }\n\n    watch(data, (newValue) => {\n      localStorage.setItem(key, JSON.stringify(newValue))\n    }, { deep: true })\n  }\n\n  return data\n}\n```\n\n## Data Fetching\n\n### useFetch - Basic Usage\n\n```typescript\nconst { data, error, pending, refresh } = await useFetch('\u002Fapi\u002Fusers')\n\nconst { data: users } = await useFetch('\u002Fapi\u002Fusers', {\n  method: 'GET',\n  query: { limit: 10, offset: 0 },\n  headers: { 'X-Custom-Header': 'value' }\n})\n```\n\n### Reactive Parameters\n\n```vue\n\u003Cscript setup lang=\"ts\">\nconst page = ref(1)\nconst search = ref('')\n\nconst { data: users, pending } = await useFetch('\u002Fapi\u002Fusers', {\n  query: {\n    page,\n    search,\n    limit: 10\n  }\n})\n\u003C\u002Fscript>\n```\n\n### Transform Data\n\n```typescript\nconst { data: userNames } = await useFetch('\u002Fapi\u002Fusers', {\n  transform: (users) => users.map(u => u.name)\n})\n```\n\n### useAsyncData - Custom Logic\n\n```typescript\nconst { data } = await useAsyncData('dashboard', async () => {\n  const [users, posts, stats] = await Promise.all([\n    $fetch('\u002Fapi\u002Fusers'),\n    $fetch('\u002Fapi\u002Fposts'),\n    $fetch('\u002Fapi\u002Fstats')\n  ])\n  return { users, posts, stats }\n})\n```\n\n### Error Handling\n\n```typescript\nconst { data, error, status } = await useFetch('\u002Fapi\u002Fusers')\n\nif (error.value) {\n  console.error('Error:', error.value.message)\n  console.error('Status:', error.value.statusCode)\n}\n\nif (status.value === 'error') {\n  showError(error.value)\n}\n```\n\n### Manual Refresh\n\n```typescript\nconst { data, refresh, execute } = await useFetch('\u002Fapi\u002Fusers', {\n  immediate: false\n})\n\nawait execute()\nawait refresh()\nawait refresh({ dedupe: true })\n```\n\n### Shallow vs Deep Reactivity\n\n```typescript\n\u002F\u002F Nuxt 5 default: Shallow reactivity\nconst { data } = await useFetch('\u002Fapi\u002Fuser')\ndata.value.name = 'New Name'  \u002F\u002F Won't trigger reactivity!\n\n\u002F\u002F Enable deep reactivity for mutations\nconst { data } = await useFetch('\u002Fapi\u002Fuser', {\n  deep: true\n})\ndata.value.name = 'New Name'  \u002F\u002F Now works!\n\n\u002F\u002F Or refresh instead of mutating\nconst { data, refresh } = await useFetch('\u002Fapi\u002Fuser')\nawait $fetch('\u002Fapi\u002Fuser', { method: 'PATCH', body: { name: 'New Name' } })\nawait refresh()\n```\n\n### Caching and Deduplication\n\n```typescript\nconst { data } = await useFetch('\u002Fapi\u002Fusers', {\n  key: 'users-list',\n  dedupe: 'cancel',\n  getCachedData: (key, nuxtApp) => {\n    return nuxtApp.payload.data[key]\n  }\n})\n```\n\n### Lazy Loading Data\n\n```typescript\nconst { data, pending } = useLazyFetch('\u002Fapi\u002Fusers')\nconst { data: data2, pending: pending2 } = useLazyAsyncData('users', () => $fetch('\u002Fapi\u002Fusers'))\n```\n\n### $fetch - Client-Side Only\n\n```typescript\nconst submitForm = async () => {\n  const result = await $fetch('\u002Fapi\u002Fsubmit', {\n    method: 'POST',\n    body: formData.value\n  })\n}\n```\n\n## State Management\n\n### Shared Cart Example\n\n```typescript\n\u002F\u002F composables\u002FuseCart.ts\ninterface CartItem {\n  id: string\n  name: string\n  price: number\n  quantity: number\n}\n\nexport const useCart = () => {\n  const items = useState\u003CCartItem[]>('cart-items', () => [])\n\n  const total = computed(() =>\n    items.value.reduce((sum, item) => sum + item.price * item.quantity, 0)\n  )\n\n  const addItem = (product: Omit\u003CCartItem, 'quantity'>) => {\n    const existing = items.value.find(i => i.id === product.id)\n    if (existing) {\n      existing.quantity++\n    } else {\n      items.value.push({ ...product, quantity: 1 })\n    }\n  }\n\n  const removeItem = (id: string) => {\n    items.value = items.value.filter(i => i.id !== id)\n  }\n\n  const clearCart = () => {\n    items.value = []\n  }\n\n  return { items, total, addItem, removeItem, clearCart }\n}\n```\n\n### Pinia Integration\n\n```bash\nbun add pinia @pinia\u002Fnuxt\n```\n\n```typescript\n\u002F\u002F nuxt.config.ts\nexport default defineNuxtConfig({\n  modules: ['@pinia\u002Fnuxt']\n})\n\n\u002F\u002F stores\u002Fauth.ts\nimport { defineStore } from 'pinia'\n\nexport const useAuthStore = defineStore('auth', {\n  state: () => ({\n    user: null as User | null,\n    token: null as string | null\n  }),\n\n  getters: {\n    isAuthenticated: (state) => !!state.user,\n    userName: (state) => state.user?.name ?? 'Guest'\n  },\n\n  actions: {\n    async login(email: string, password: string) {\n      const { user, token } = await $fetch('\u002Fapi\u002Fauth\u002Flogin', {\n        method: 'POST',\n        body: { email, password }\n      })\n      this.user = user\n      this.token = token\n    },\n\n    logout() {\n      this.user = null\n      this.token = null\n    }\n  }\n})\n```\n\n## Common Anti-Patterns\n\n### Using ref Instead of useState\n\n```typescript\n\u002F\u002F WRONG\nexport const useAuth = () => {\n  const user = ref(null)\n  return { user }\n}\n\n\u002F\u002F CORRECT\nexport const useAuth = () => {\n  const user = useState('auth-user', () => null)\n  return { user }\n}\n```\n\n### Non-Deterministic Transform\n\n```typescript\n\u002F\u002F WRONG - Causes hydration mismatch!\nconst { data } = await useFetch('\u002Fapi\u002Fusers', {\n  transform: (users) => users.sort(() => Math.random() - 0.5)\n})\n\n\u002F\u002F CORRECT\nconst { data } = await useFetch('\u002Fapi\u002Fusers', {\n  transform: (users) => users.sort((a, b) => a.name.localeCompare(b.name))\n})\n```\n\n### Mutating Shallow Refs\n\n```typescript\n\u002F\u002F WRONG\nconst { data } = await useFetch('\u002Fapi\u002Fuser')\ndata.value.name = 'New Name'\n\n\u002F\u002F CORRECT - Enable deep\nconst { data } = await useFetch('\u002Fapi\u002Fuser', { deep: true })\n\n\u002F\u002F CORRECT - Replace entire value\ndata.value = { ...data.value, name: 'New Name' }\n\n\u002F\u002F CORRECT - Refresh after mutation\nawait $fetch('\u002Fapi\u002Fuser', { method: 'PATCH', body: { name: 'New Name' } })\nawait refresh()\n```\n\n## Troubleshooting\n\n**Data Not Refreshing When Params Change:**\n- Ensure params are reactive: `{ query: { page } }` where `page = ref(1)`\n- Check you're using the ref itself, not `.value`\n\n**Hydration Mismatch with useState:**\n- Ensure key is unique: `useState('unique-key', () => value)`\n- Avoid `Math.random()` or `Date.now()` in initial values\n\n**State Lost on Navigation:**\n- Use `useState` instead of `ref` for persistent state\n\n**clearNuxtState not working as expected:**\n- v5 resets to initial default value, not `undefined`\n- Check that the initial factory function returns the expected default\n\n## Related Skills\n\n- **nuxt-core**: Project setup, routing, configuration\n- **nuxt-server**: Server routes, API patterns (Nitro v3)\n- **nuxt-production**: Performance, testing, deployment\n\n---\n\n**Version**: 5.0.0 | **Last Updated**: 2026-03-30 | **License**: MIT\n",{"name":5,"license":15,"metadata":43,"description":7},{"author":44,"version":45,"category":46,"framework":47,"last-verified":48,"framework-version":49},"Claude Skills Maintainers","5.0.0","Framework","Nuxt",1774828800000,"5.x","main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002Fsecondsky\u002Fclaude-skills\u002Fnuxt-data-nuxt-v5",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":8,"skillName":5,"commands":60,"prompt":70,"zipAvailable":71},[61,64,67],{"tool":62,"command":63},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill nuxt-data",{"tool":65,"command":66},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill nuxt-data",{"tool":68,"command":69},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill nuxt-data","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fsecondsky\u002Fclaude-skills\u002Fnuxt-data-nuxt-v5\u002FSKILL.md",true,[73,79,83],{"path":74,"resourceType":75,"resourceTypeDesc":76,"sizeBytes":77,"sourceHtmlUrl":78},"references\u002Fcomposables.md","REFERENCE","参考文档",16360,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fsecondsky\u002Fclaude-skills\u002Fnuxt-data-nuxt-v5\u002Freferences\u002Fcomposables.md",{"path":80,"resourceType":75,"resourceTypeDesc":76,"sizeBytes":81,"sourceHtmlUrl":82},"references\u002Fdata-fetching.md",16316,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fsecondsky\u002Fclaude-skills\u002Fnuxt-data-nuxt-v5\u002Freferences\u002Fdata-fetching.md",{"path":84,"resourceType":85,"resourceTypeDesc":86,"sizeBytes":87,"sourceHtmlUrl":88},"templates\u002Fcomposables\u002FuseAuth.ts","SCRIPT","脚本",3038,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fsecondsky\u002Fclaude-skills\u002Fnuxt-data-nuxt-v5\u002Ftemplates\u002Fcomposables\u002FuseAuth.ts",[90,104,114,123,129,136],{"skillNo":91,"name":92,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":93,"categories":94,"keywords":100,"publishedAt":38},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[95],{"categoryNo":96,"categoryName":97,"taxonomyType":98,"taxonomyTypeDesc":99},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[101,102,103],"model","model hierarchy","model hierarchy skill",{"skillNo":105,"name":106,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":107,"categories":108,"keywords":110,"publishedAt":38},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[109],{"categoryNo":96,"categoryName":97,"taxonomyType":98,"taxonomyTypeDesc":99},[111,112,113],"MCP","zoom","zoom mcp",{"skillNo":115,"name":116,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":117,"categories":118,"keywords":119,"publishedAt":38},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[120,121,122,112],"sdk","zoom apps sdk","apps",{"skillNo":124,"name":125,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":126,"categories":127,"keywords":128,"publishedAt":38},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[125],{"skillNo":130,"name":131,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":132,"categories":133,"keywords":135,"publishedAt":38},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[134],{"categoryNo":96,"categoryName":97,"taxonomyType":98,"taxonomyTypeDesc":99},[131],{"skillNo":137,"name":138,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":139,"categories":140,"keywords":141,"publishedAt":38},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[138]]