@vueuse/core

State Management

This feature allows you to easily synchronize a reactive state with localStorage, enabling persistent state across page reloads. The example demonstrates how to store and retrieve user settings.

import { ref } from 'vue'
import { useLocalStorage } from '@vueuse/core'

const userSettings = useLocalStorage('user-settings', { theme: 'dark', notifications: true })

Sensor Utilities

Sensor utilities provide reactive access to browser sensors like mouse position. The example shows how to track the mouse position on the screen.

import { useMouse } from '@vueuse/core'

const { x, y } = useMouse()

Animation

This feature enables easy setup of interval-based side effects, useful for animations or regular data fetching. The code sample demonstrates setting up a simple interval that logs a message every second.

import { useIntervalFn } from '@vueuse/core'

const { pause, resume } = useIntervalFn(() => console.log('Tick'), 1000)