npm i @vueuse/integrations

// Preferred
import { useAxios } from '@vueuse/integrations/useAxios'

// Avoid
import { useAxios } from '@vueuse/integrations'

import { UseFocusTrap } from '@vueuse/integrations/useFocusTrap/component'
import { UseSortable } from '@vueuse/integrations/useSortable/component'
import { UseAsyncValidator } from '@vueuse/integrations/useAsyncValidator/component'

import { useAxios } from '@vueuse/integrations/useAxios'

// Awaits the whole result; rejects on error
const { data, error } = await useAxios('/api/posts')

// Manual trigger without firing immediately
const { execute } = useAxios('/api/posts', { method: 'GET' }, { immediate: false })

// Typed data via initialData (data becomes Ref<T> instead of Ref<T | undefined>)
const { data } = useAxios<User[]>('/api/users', undefined, { initialData: [] })

import { useIDBKeyval } from '@vueuse/integrations/useIDBKeyval'

const { data: count, set } = useIDBKeyval('my-count', 0)
count.value++          // watched, persisted automatically
await set(10)          // explicit write, resolves after the IDB transaction
count.value = null     // deletes the key

import { useSortable } from '@vueuse/integrations/useSortable'

const list = ref(['a', 'b', 'c'])
const { start, stop, option } = useSortable(el, list, {
  watchElement: true, // reinitialize when el appears/disappears (v-if)
})

import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'

const target = useTemplateRef<HTMLElement>('modal')
const { activate, deactivate, hasFocus } = useFocusTrap(target, { immediate: true })

async function open() {
  show.value = true
  await nextTick() // wait for v-if to render the element
  activate()
}

import { useCookies } from '@vueuse/integrations/useCookies'

const { get, set, remove } = useCookies(['token'], { autoUpdateDependencies: true })

import { useFuse } from '@vueuse/integrations/useFuse'

const search = ref('')
const { results } = useFuse(search, data, {
  fuseOptions: { keys: ['title'] },
  resultLimit: 10,
  matchAllWhenSearchEmpty: true,
})

useChangeCase('hello world', 'camelCase')   // writable computed; type must match a change-case *Case export
useDrauu(svgEl, { brush: { color: 'red' } }) // target must be an <svg> element
useJwt(token)                                // { header, payload } with fallbackValue on decode error
useNProgress()                               // { isLoading, progress, start, done, remove }
useQRCode('https://vueuse.org')              // ShallowRef<string> of a data URL
useAsyncValidator(form, rules, { manual: true }) // thenable; { pass, errors, execute }