DOCSEARCHbyAlgolia
Submit Docs

VueUse

website·Indexed 36 days ago

https://vueuse.org/guide.html

A collection of Vue Composition API utility functions. It provides a wide range of reactive utilities across categories such as Browser, Sensors, Animation, State, and Time, as well as specialized packages for Electron, Firebase, and various third-party integrations.

Tokens
131.2K
Snippets
880
Records
965
Agent score
73%

What's inside VueUse

  1. Overview of useSortable integration

    useSortable is a wrapper for the SortableJS library provided by the @vueuse/integrations package. It allows developers to implement drag-and-drop sorting for a single list in Vue applications. For a full list of available configuration options, refer to the SortableJS documentation.

  2. Overview of @vueuse/electron functions

    @vueuse/electron provides several reactive wrappers for Electron's renderer process APIs:

    • useIpcRenderer: Provides the ipcRenderer and its APIs with Vue reactivity.
    • useIpcRendererInvoke: Provides a reactive result for the ipcRenderer.invoke API.
    • useIpcRendererOn: Simplifies the use of ipcRenderer.on and automatically handles ipcRenderer.removeListener when the component is unmounted.
    • useZoomFactor: Provides a reactive wrapper for the WebFrame zoom factor.
    • useZoomLevel: Provides a reactive wrapper for the WebFrame zoom level.

  3. Overview of createTemplatePromise

    createTemplatePromise is a utility that returns a Vue component. This component remains unrendered until its .start() method is called. Once called, the component's slot is rendered, and the .start() method returns a promise that resolves or rejects based on actions taken within that slot. This allows for programmatic control of UI elements (like modals or dialogs) while maintaining full control over the UI using Vue templates.

  4. Create a reactive unique array with useArrayUnique

    useArrayUnique is a utility that takes an array (or a ref/getter returning an array) and returns a ComputedRef containing only the unique elements. It automatically updates when the source list or the values within the list change.
    import { useArrayUnique } from '@vueuse/core'

const list = reactive([1, 2, 2, 3])
const result = useArrayUnique(list)
// result.value: [1, 2, 3]

  5. Use refWithControl for fine-grained reactivity control

    refWithControl (aliased as controlledRef) extends a standard Vue ref to provide explicit control over when the reactivity system should track a dependency or trigger an update. This is useful for avoiding unnecessary re-renders or infinite loops while still maintaining a reactive state.
    import { refWithControl } from '@vueuse/core'

const num = refWithControl(0)
const doubled = computed(() => num.value * 2)

// Standard reactive update
num.value = 42
console.log(doubled.value) // 84

// Update value WITHOUT triggering reactivity (doubled.value will not update)
num.set(30, false)
console.log(num.value) // 30
console.log(doubled.value) // 84

// Read value WITHOUT tracking reactivity (won't trigger watchEffect)
watchEffect(() => {
  console.log(num.peek())
})

  6. Configure WebMCP tool annotations

    Use the annotations property to provide hints to the AI agent about how the tool should be used. Available hints include:

    • readOnlyHint: Indicates the tool does not mutate state and is safe for speculative calls.
    • untrustedContentHint: Indicates the tool may return content that should be treated as untrusted.
    useWebMCP({
  name: 'get-user-profile',
  description: 'Fetch user profile data',
  annotations: {
    readOnlyHint: true,
  },
  execute() {
    // ...
  },
})

  7. Manage reactive async state with useAsyncState

    useAsyncState provides a reactive state for an asynchronous operation. It does not block the setup function and updates the state once the promise resolves. By default, the state is stored in a shallowRef.
    import { useAsyncState } from '@vueuse/core'
import axios from 'axios'

const { state, isReady, isLoading, error } = useAsyncState(
  axios
    .get('https://jsonplaceholder.typicode.com/todos/1')
    .then(t => t.data),
  { id: null },
)

  8. Manage reactive local storage state with useLocalStorage

    useLocalStorage is a VueUse utility that creates a reactive reference synchronized with the browser's localStorage. It is a specialized version of useStorage. It accepts a storage key and an initial value, returning a RemovableRef that automatically persists changes to local storage.

  9. Handle user interactions with @vueuse/gesture

    @vueuse/gesture provides Vue composables for mouse and touch interactions. It includes directive support for v-drag, v-pinch, and v-move, and is designed to work well with @vueuse/motion or other animation libraries.

  10. Manage document head with @vueuse/head

    @vueuse/head is a document head manager for Vue 3 that is SSR ready.

  11. Create animations with @vueuse/motion

    @vueuse/motion provides Vue composables for smooth animations based on Popmotion. It features a declarative API, 10+ presets, TypeScript support, and a lightweight bundle size (<20kb). It also supports Nuxt via nuxt-use-motion.

  12. Use useStorageAsync for reactive asynchronous storage

    useStorageAsync provides a reactive wrapper around asynchronous storage mechanisms. Because the storage is asynchronous, the initial value may be the default value until the real value is loaded from the storage provider.
    import { useStorageAsync } from '@vueuse/core'

// Basic usage: key, initial value, and the async storage implementation
const accessToken = useStorageAsync('access.token', '', SomeAsyncStorage)