Nuxt 4 - Auto-imported Composable

// composables/useUser.ts
export const useUser = () => {
  const user = useState<User | null>('user', () => null)
  const loading = ref(false)
  const error = ref<Error | null>(null)

  const fetchUser = async (id: string) => {
    loading.value = true
    error.value = null

    try {
      const data = await $fetch<User>(`/api/users/${id}`)
      user.value = data
    } catch (e) {
      error.value = e as Error
    } finally {
      loading.value = false
    }
  }

  const logout = () => {
    user.value = null
  }

  return {
    user: readonly(user),
    loading: readonly(loading),
    error: readonly(error),
    fetchUser,
    logout,
  }
}