vueuse

pnpm add @vueuse/core

pnpm add @vueuse/nuxt @vueuse/core

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@vueuse/nuxt'],
})

const state = useLocalStorage('my-key', { count: 0 })

const { x, y } = useMouse()

const search = ref('')
const debouncedSearch = refDebounced(search, 300)

const useSharedMouse = createSharedComposable(useMouse)

import { isClient } from '@vueuse/core'
 
if (isClient) {
  // Browser-only code
  const { width } = useWindowSize()
}

const width = ref(0)
 
onMounted(() => {
  // Only runs in browser
  const { width: w } = useWindowSize()
  width.value = w.value
})

// These check isClient internally
const mouse = useMouse() // Returns {x: 0, y: 0} on server
const storage = useLocalStorage('key', 'default') // Uses default on server

import type { MaybeElementRef } from '@vueuse/core'
 
// Component ref needs .$el to get DOM element
const compRef = ref<ComponentInstance>()
const { width } = useElementSize(compRef) // ❌ Won't work
 
// Use MaybeElementRef pattern
import { unrefElement } from '@vueuse/core'
 
const el = computed

const compRef = ref<ComponentInstance>()
 
onMounted(() => {
  const el = compRef.value?.$el as HTMLElement
  const { width } = useElementSize(el)
})