DOCSEARCHbyAlgolia
Submit Docs

VueUse

website·Indexed 29 days ago

https://vueuse.pages.dev

A collection of Vue Composition APIs for Vue.js, featuring a core set of utilities and specialized packages including @vueuse/math, @vueuse/router, @vueuse/electron, @vueuse/rxjs, @vueuse/firebase, and @vueuse/integrations.

Tokens
129.5K
Snippets
847
Records
938
Agent score
74%

What's inside VueUse

  1. 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.

  2. 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.

  3. Manage multi-step wizards with useStepper

    The useStepper function provides a set of reactive state and helper methods to track the current step in a sequence. It can be initialized with either an array of step identifiers or an object where keys are step identifiers and values are step metadata.

  4. Play sound effects with @vueuse/sound

    @vueuse/sound provides Vue composables for playing sound effects using Howler.js. It is lightweight (<1kb gzip) and supports Nuxt 3 via @vueuse/sound/nuxt.

  5. Join arrays reactively with useArrayJoin

    useArrayJoin is a reactive implementation of Array.join. It returns a ComputedRef<string> that automatically updates whenever the source array or the separator changes. It supports arrays of refs, reactive arrays, and reactive separators.
    import { useArrayJoin } from '@vueuse/core'

const list = ref(['apple', 'banana', 'cherry'])
const result = useArrayJoin(list, '-')
// result.value: 'apple-banana-cherry'

  7. Manage reactive session storage with useSessionStorage

    The useSessionStorage function creates a reactive reference (RemovableRef) that is synchronized with the browser's sessionStorage. It allows you to store state that persists across page refreshes but is cleared when the page session ends (e.g., when the tab is closed). For detailed usage and configuration options, refer to the general useStorage documentation.
    import { useSessionStorage } from '@vueuse/core'

// Example: Store a user preference in session storage
const state = useSessionStorage('user-settings', { theme: 'dark' })

  8. Manage confirmation dialogs with useConfirmDialog

    The useConfirmDialog composable creates a state machine for modal dialogs and confirmation windows. It provides a reactive isRevealed state to control visibility and methods to trigger the dialog and handle user responses via hooks or promises.
    <script setup>
import { useConfirmDialog } from '@vueuse/core'

const { isRevealed, reveal, confirm, cancel, onReveal, onConfirm, onCancel } = useConfirmDialog()
</script>

<template>
  <button @click="reveal">Show Modal</button>

  <teleport to="body">
    <div v-if="isRevealed" class="modal-bg">
      <div class="modal">
        <h2>Are you sure?</h2>
        <button @click="confirm">Yes</button>
        <button @click="cancel">Cancel</button>
      </div>
    </div>
  </teleport>
</template>

  9. Implement structured data with @vueuse/schema-org

    @vueuse/schema-org enables typed and automated Google Rich Results (Schema.org) for Vue. It includes 20+ typed schemas, automated ID and URL resolving, and supports SSR and tree-shaking. It provides both Composables and Components APIs and integrates with VitePress, Nuxt, Vitesse, and Vite.

  10. Create a reactive LocalStorage reference with useLocalStorage

    The useLocalStorage function creates a reactive reference that is synchronized with the browser's localStorage. It is a specialized version of useStorage. It accepts a key, an initial value, and optional configuration options, returning a RemovableRef that automatically persists changes to the specified local storage key.
    import { useLocalStorage } from '@vueuse/core'

// Example: Store a user preference
const store = useLocalStorage('my-storage-key', { name: 'John Doe', age: 30 })

  11. Listen to Electron IPC events with useIpcRendererOn

    The useIpcRendererOn function from @vueuse/electron provides a wrapper around Electron's ipcRenderer.on. It allows you to listen for messages on a specific channel and automatically removes the listener using ipcRenderer.removeListener when the Vue component is unmounted, preventing memory leaks.
    import { useIpcRendererOn } from '@vueuse/electron'

// Listen for 'custom-event'. 
// The listener is automatically removed when the component unmounts.
useIpcRendererOn('custom-event', (event, ...args) => {
  console.log(args)
})

  12. Create a file drop zone with useDropZone

    The useDropZone function creates a region where files can be dropped. It tracks whether a file is currently hovering over the zone via isOverDropZone and provides a files ref containing the dropped files.

    Safari Limitation: Due to browser restrictions in Safari, file type validation only occurs during the drop event, not the drag event. Consequently, isOverDropZone will always be true during a drag operation in Safari, regardless of the file type.

    <script setup lang="ts">
import { ref } from 'vue'
import { useDropZone } from '@vueuse/core'

const dropZoneRef = ref<HTMLDivElement>()

function onDrop(files: File[] | null) {
  console.log('Files dropped:', files)
}

const { isOverDropZone } = useDropZone(dropZoneRef, {
  onDrop,
  dataTypes: ['image/jpeg'], // Only allow JPEGs
  multiple: true,            // Allow multiple files
  preventDefaultForUnhandled: false,
})
</script>

<template>
  <div ref="dropZoneRef" :class="{ 'is-dragging': isOverDropZone }">
    Drop files here
  </div>
</template>