open-index/open-npm huggingface dataset:
npm package: @lgarciawebdev/use-fetch-state
Description: A Nuxt composable for managing fetch state using useFetch with auto-import and type support.
Author: Lou Anthony Garcia
Latest version: 1.0.5

# Introduction
A Nuxt (only) composable for managing fetch state using `useFetch` with auto-import and type support.

## Usage

### Installation
```
npm install @lgarciawebdev/use-fetch-state
```

### Inside components
```typescript
<script setup lang="ts">
const { actionFn, data, status, error } = useFetchState('/api/modules', {
    method: 'POST',
    body: { foo: 'bar' }
})

async function onSubmit(event: Event) {
    await actionFn(event)
    if (status.value === 'success') {
        console.log('Success:', data.value)
    }
}
</script>
```

### Or if using NuxtUI
```typescript
<script setup lang="ts">
const { actionFn, data, status, error } = useFetchState('/api/modules', {
    method: 'POST',
    body: state.value
})

watch(status, () => {
    if(status.value == 'success') {
        toast.add({
            title: 'Success',
            description: 'The form has been submitted.',
            color: 'success'
        })
    }
    if(status.value == 'error') {
        ... do something with the error object from the useFetchState hook
    }
})

/* Front-end error handling */
async function onError(event: FormErrorEvent) {
    console.log("ERROR", event?.errors)
}
</script>
```
```typescript
<template>
    <UForm :schema="schema" :state="state" @submit="actionFn" @error="onError">
    ...
    </UForm>
</template>
```

#### Contributions are more than welcome!