feat: Complete fleet — 94 skills across 10+ domains
Pulled ALL skills from 15 source repositories: - anthropics/skills: 16 (docs, design, MCP, testing) - obra/superpowers: 14 (TDD, debugging, agents, planning) - coreyhaines31/marketingskills: 25 (marketing, CRO, SEO, growth) - better-auth/skills: 5 (auth patterns) - vercel-labs/agent-skills: 5 (React, design, Vercel) - antfu/skills: 16 (Vue, Vite, Vitest, pnpm, Turborepo) - Plus 13 individual skills from various repos Mosaic Stack is not limited to coding — the Orchestrator and subagents serve coding, business, design, marketing, writing, logistics, analysis, and more. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jason Woltje
292
skills/vueuse-functions/references/useAxios.md
Normal file
292
skills/vueuse-functions/references/useAxios.md
Normal file
@@ -0,0 +1,292 @@
|
||||
---
|
||||
category: '@Integrations'
|
||||
---
|
||||
|
||||
# useAxios
|
||||
|
||||
Wrapper for [`axios`](https://github.com/axios/axios).
|
||||
|
||||
## Install
|
||||
|
||||
```bash
|
||||
npm i axios@^1
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
```ts
|
||||
import { useAxios } from '@vueuse/integrations/useAxios'
|
||||
|
||||
const { data, isFinished } = useAxios('/api/posts')
|
||||
```
|
||||
|
||||
or use an instance of axios
|
||||
|
||||
```ts
|
||||
import { useAxios } from '@vueuse/integrations/useAxios'
|
||||
import axios from 'axios'
|
||||
|
||||
const instance = axios.create({
|
||||
baseURL: '/api',
|
||||
})
|
||||
|
||||
const { data, isFinished } = useAxios('/posts', instance)
|
||||
```
|
||||
|
||||
use an instance of axios with config options
|
||||
|
||||
```ts
|
||||
import { useAxios } from '@vueuse/integrations/useAxios'
|
||||
import axios from 'axios'
|
||||
|
||||
const instance = axios.create({
|
||||
baseURL: '/api',
|
||||
})
|
||||
|
||||
const { data, isFinished } = useAxios('/posts', { method: 'POST' }, instance)
|
||||
```
|
||||
|
||||
When you don't pass the `url`. The default value is `{immediate: false}`
|
||||
|
||||
```ts
|
||||
import { useAxios } from '@vueuse/integrations/useAxios'
|
||||
|
||||
const { execute } = useAxios()
|
||||
execute(url)
|
||||
```
|
||||
|
||||
The `execute` function `url` here is optional, and `url2` will replace the `url1`.
|
||||
|
||||
```ts
|
||||
import { useAxios } from '@vueuse/integrations/useAxios'
|
||||
|
||||
const { execute } = useAxios(url1, {}, { immediate: false })
|
||||
execute(url2)
|
||||
```
|
||||
|
||||
The `execute` function can accept `config` only.
|
||||
|
||||
```ts
|
||||
import { useAxios } from '@vueuse/integrations/useAxios'
|
||||
|
||||
const { execute } = useAxios(url1, { method: 'GET' }, { immediate: false })
|
||||
execute({ params: { key: 1 } })
|
||||
execute({ params: { key: 2 } })
|
||||
```
|
||||
|
||||
The `execute` function resolves with a result of network request.
|
||||
|
||||
```ts
|
||||
import { useAxios } from '@vueuse/integrations/useAxios'
|
||||
|
||||
const { execute } = useAxios()
|
||||
const result = await execute(url)
|
||||
```
|
||||
|
||||
use an instance of axios with `immediate` options
|
||||
|
||||
```ts
|
||||
import { useAxios } from '@vueuse/integrations/useAxios'
|
||||
import axios from 'axios'
|
||||
|
||||
const instance = axios.create({
|
||||
baseURL: '/api',
|
||||
})
|
||||
|
||||
const { data, isFinished } = useAxios('/posts', { method: 'POST' }, instance, {
|
||||
immediate: false,
|
||||
})
|
||||
```
|
||||
|
||||
## Type Declarations
|
||||
|
||||
```ts
|
||||
export interface UseAxiosReturn<
|
||||
T,
|
||||
R = AxiosResponse<T>,
|
||||
_D = any,
|
||||
O extends UseAxiosOptions = UseAxiosOptions<T>,
|
||||
> {
|
||||
/**
|
||||
* Axios Response
|
||||
*/
|
||||
response: ShallowRef<R | undefined>
|
||||
/**
|
||||
* Axios response data
|
||||
*/
|
||||
data: O extends UseAxiosOptionsWithInitialData<T>
|
||||
? Ref<T>
|
||||
: Ref<T | undefined>
|
||||
/**
|
||||
* Indicates if the request has finished
|
||||
*/
|
||||
isFinished: Ref<boolean>
|
||||
/**
|
||||
* Indicates if the request is currently loading
|
||||
*/
|
||||
isLoading: Ref<boolean>
|
||||
/**
|
||||
* Indicates if the request was canceled
|
||||
*/
|
||||
isAborted: Ref<boolean>
|
||||
/**
|
||||
* Any errors that may have occurred
|
||||
*/
|
||||
error: ShallowRef<unknown | undefined>
|
||||
/**
|
||||
* Aborts the current request
|
||||
*/
|
||||
abort: (message?: string | undefined) => void
|
||||
/**
|
||||
* Alias to `abort`
|
||||
*/
|
||||
cancel: (message?: string | undefined) => void
|
||||
/**
|
||||
* Alias to `isAborted`
|
||||
*/
|
||||
isCanceled: Ref<boolean>
|
||||
}
|
||||
export interface StrictUseAxiosReturn<
|
||||
T,
|
||||
R,
|
||||
D,
|
||||
O extends UseAxiosOptions = UseAxiosOptions<T>,
|
||||
> extends UseAxiosReturn<T, R, D, O> {
|
||||
/**
|
||||
* Manually call the axios request
|
||||
*/
|
||||
execute: (
|
||||
url?: string | AxiosRequestConfig<D>,
|
||||
config?: AxiosRequestConfig<D>,
|
||||
) => Promise<StrictUseAxiosReturn<T, R, D, O>>
|
||||
}
|
||||
export interface EasyUseAxiosReturn<T, R, D> extends UseAxiosReturn<T, R, D> {
|
||||
/**
|
||||
* Manually call the axios request
|
||||
*/
|
||||
execute: (
|
||||
url: string,
|
||||
config?: AxiosRequestConfig<D>,
|
||||
) => Promise<EasyUseAxiosReturn<T, R, D>>
|
||||
}
|
||||
export interface UseAxiosOptionsBase<T = any> {
|
||||
/**
|
||||
* Will automatically run axios request when `useAxios` is used
|
||||
*
|
||||
*/
|
||||
immediate?: boolean
|
||||
/**
|
||||
* Use shallowRef.
|
||||
*
|
||||
* @default true
|
||||
*/
|
||||
shallow?: boolean
|
||||
/**
|
||||
* Abort previous request when a new request is made.
|
||||
*
|
||||
* @default true
|
||||
*/
|
||||
abortPrevious?: boolean
|
||||
/**
|
||||
* Callback when error is caught.
|
||||
*/
|
||||
onError?: (e: unknown) => void
|
||||
/**
|
||||
* Callback when success is caught.
|
||||
*/
|
||||
onSuccess?: (data: T) => void
|
||||
/**
|
||||
* Sets the state to initialState before executing the promise.
|
||||
*/
|
||||
resetOnExecute?: boolean
|
||||
/**
|
||||
* Callback when request is finished.
|
||||
*/
|
||||
onFinish?: () => void
|
||||
}
|
||||
export interface UseAxiosOptionsWithInitialData<T>
|
||||
extends UseAxiosOptionsBase<T> {
|
||||
/**
|
||||
* Initial data
|
||||
*/
|
||||
initialData: T
|
||||
}
|
||||
export type UseAxiosOptions<T = any> =
|
||||
| UseAxiosOptionsBase<T>
|
||||
| UseAxiosOptionsWithInitialData<T>
|
||||
export declare function useAxios<
|
||||
T = any,
|
||||
R = AxiosResponse<T>,
|
||||
D = any,
|
||||
O extends
|
||||
UseAxiosOptionsWithInitialData<T> = UseAxiosOptionsWithInitialData<T>,
|
||||
>(
|
||||
url: string,
|
||||
config?: AxiosRequestConfig<D>,
|
||||
options?: O,
|
||||
): StrictUseAxiosReturn<T, R, D, O> & Promise<StrictUseAxiosReturn<T, R, D, O>>
|
||||
export declare function useAxios<
|
||||
T = any,
|
||||
R = AxiosResponse<T>,
|
||||
D = any,
|
||||
O extends
|
||||
UseAxiosOptionsWithInitialData<T> = UseAxiosOptionsWithInitialData<T>,
|
||||
>(
|
||||
url: string,
|
||||
instance?: AxiosInstance,
|
||||
options?: O,
|
||||
): StrictUseAxiosReturn<T, R, D, O> & Promise<StrictUseAxiosReturn<T, R, D, O>>
|
||||
export declare function useAxios<
|
||||
T = any,
|
||||
R = AxiosResponse<T>,
|
||||
D = any,
|
||||
O extends
|
||||
UseAxiosOptionsWithInitialData<T> = UseAxiosOptionsWithInitialData<T>,
|
||||
>(
|
||||
url: string,
|
||||
config: AxiosRequestConfig<D>,
|
||||
instance: AxiosInstance,
|
||||
options?: O,
|
||||
): StrictUseAxiosReturn<T, R, D, O> & Promise<StrictUseAxiosReturn<T, R, D, O>>
|
||||
export declare function useAxios<
|
||||
T = any,
|
||||
R = AxiosResponse<T>,
|
||||
D = any,
|
||||
O extends UseAxiosOptionsBase<T> = UseAxiosOptionsBase<T>,
|
||||
>(
|
||||
url: string,
|
||||
config?: AxiosRequestConfig<D>,
|
||||
options?: O,
|
||||
): StrictUseAxiosReturn<T, R, D, O> & Promise<StrictUseAxiosReturn<T, R, D, O>>
|
||||
export declare function useAxios<
|
||||
T = any,
|
||||
R = AxiosResponse<T>,
|
||||
D = any,
|
||||
O extends UseAxiosOptionsBase<T> = UseAxiosOptionsBase<T>,
|
||||
>(
|
||||
url: string,
|
||||
instance?: AxiosInstance,
|
||||
options?: O,
|
||||
): StrictUseAxiosReturn<T, R, D, O> & Promise<StrictUseAxiosReturn<T, R, D, O>>
|
||||
export declare function useAxios<
|
||||
T = any,
|
||||
R = AxiosResponse<T>,
|
||||
D = any,
|
||||
O extends UseAxiosOptionsBase<T> = UseAxiosOptionsBase<T>,
|
||||
>(
|
||||
url: string,
|
||||
config: AxiosRequestConfig<D>,
|
||||
instance: AxiosInstance,
|
||||
options?: O,
|
||||
): StrictUseAxiosReturn<T, R, D, O> & Promise<StrictUseAxiosReturn<T, R, D, O>>
|
||||
export declare function useAxios<T = any, R = AxiosResponse<T>, D = any>(
|
||||
config?: AxiosRequestConfig<D>,
|
||||
): EasyUseAxiosReturn<T, R, D> & Promise<EasyUseAxiosReturn<T, R, D>>
|
||||
export declare function useAxios<T = any, R = AxiosResponse<T>, D = any>(
|
||||
instance?: AxiosInstance,
|
||||
): EasyUseAxiosReturn<T, R, D> & Promise<EasyUseAxiosReturn<T, R, D>>
|
||||
export declare function useAxios<T = any, R = AxiosResponse<T>, D = any>(
|
||||
config?: AxiosRequestConfig<D>,
|
||||
instance?: AxiosInstance,
|
||||
): EasyUseAxiosReturn<T, R, D> & Promise<EasyUseAxiosReturn<T, R, D>>
|
||||
```
|
||||
Reference in New Issue
Block a user