/

/vueuse

Use when working with VueUse composables - track mouse position with useMouse, manage localStorage with useStorage, detect network status with useNetwork, debounce values with refDebounced, and access browser APIs reactively. Check VueUse before writing custom composables - most patterns already implemented.

251 files
167.3 KB
MIT
Updated 7 months ago
GitHub

Ask your Agent

Use this Skill: https://skilld.dev/gh/onmax/claude-config/vueuse

This session only. Nothing lands on disk.

composablesuse-image.md

1.2 KB raw

≈298 tokens on demand. Your agent reads this file only when SKILL.md points to it.

useImage

Reactive load an image in the browser, you can wait the result to display it or show a fallback.

Package: @vueuse/core Category: Browser

Usage

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

const avatarUrl = 'https://place.dog/300/200'
const { isLoading } = useImage({ src: avatarUrl })
</script>

<template>
  <span v-if="isLoading">Loading</span>
  <img v-else :src="avatarUrl">
</template>

Options

Option	Type	Default
src	`string`	-
srcset	`string`	-
sizes	`string`	-
alt	`string`	-
class	`string`	-
loading	`HTMLImageElement['loading']`	-
crossorigin	`string`	-
referrerPolicy	`HTMLImageElement['referrerPolicy']`	-
width	`HTMLImageElement['width']`	-
height	`HTMLImageElement['height']`	-
decoding	`HTMLImageElement['decoding']`	-
fetchPriority	`HTMLImageElement['fetchPriority']`	-
ismap	`HTMLImageElement['isMap']`	-
usemap	`HTMLImageElement['useMap']`	-

Reference

VueUse Docs

Source: SKILL.md on GitHub

Third-party checks

No third-party reports yet.

Provenance

Signed by skilld at 50538df. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 9 hours ago.

Activeupdated 7 months ago