المهارات vueuse-functions
📦

vueuse-functions

آمن

VueUse Composables für Vue.js anwenden

Das Erstellen von Vue.js-Funktionen von Grund auf führt zu komplexem, schwer zu wartendem Code. Diese Skill ordnet Anforderungen VueUse-Composables zu und wendet korrekte Muster an, um Implementierungen prägnant, leistungsfähig und wartbar zu halten.

يدعم: Claude Codex Code(CC)
🥉 72 برونزي
1

تنزيل ZIP المهارة

2

رفع في Claude

اذهب إلى Settings → Capabilities → Skills → Upload skill

3

فعّل وابدأ الاستخدام

اختبرها

استخدام "vueuse-functions". Implement a Vue 3 component that tracks mouse position relative to a specific element.

النتيجة المتوقعة:

Verwenden Sie das useMouseInElement-Composable von VueUse. DiesesComposable bietet reaktive x/y-Koordinaten der Maus relativ zum Ziel-Element, plus isOutside Boolean. Beispiel: const { x, y, isOutside } = useMouseInElement(target), wobei target eine Ref auf das Element ist.

استخدام "vueuse-functions". Add debounced search to an input field in my Vue 3 form.

النتيجة المتوقعة:

Verwenden Sie das useDebounceFn-Composable, um Ihre Suchfunktion zu umschließen. Importieren Sie es von @vueuse/core und wenden Sie es auf Ihren Such-Handler an: const debouncedSearch = useDebounceFn(searchFunction, 300). Rufen Sie debouncedSearch(value) in Ihrem Input-Handler auf, anstatt die unformatierte Funktion.

استخدام "vueuse-functions". How do I detect when a user tabs away from my page?

النتيجة المتوقعة:

Verwenden Sie das useDocumentVisibility-Composable von VueUse. Es gibt eine Ref mit dem aktuellen visibilityState ('visible' oder 'hidden') zurück. Beobachten Sie diese Ref, um Tab-Wechsel zu erkennen: const visibility = useDocumentVisibility(); watch(visibility, (v) => { if (v === 'visible') { /* Benutzer zurückgekehrt */ } })

التدقيق الأمني

آمن
v1 • 1/30/2026

All static findings are FALSE POSITIVES. The scanner misidentified TypeScript code examples in markdown documentation as shell commands and legitimate API documentation as credential access. This is a legitimate Vue.js development guide containing VueUse composable documentation. No malicious code, prompt injection attempts, or actual security risks detected. Safe for publication.

267
الملفات التي تم فحصها
25,774
الأسطر التي تم تحليلها
0
النتائج
1
إجمالي عمليات التدقيق
لا توجد مشكلات أمنية
تم تدقيقه بواسطة: claude

درجة الجودة

45
الهندسة المعمارية
100
قابلية الصيانة
87
المحتوى
22
المجتمع
100
الأمان
91
الامتثال للمواصفات

ماذا يمكنك بناءه

State-Management in Vue 3-Apps

Implementieren Sie reaktiven State mit VueUse-Composables wie useLocalStorage, useSessionStorage, createGlobalState und useStorage für persistenten, synchronisierbaren State über Komponenten hinweg.

Browser-API-Integration

Fügen Sie Browser-Funktionszugriff hinzu wie Clipboard, Geolocation, Medien-Geräte und Storage unter Verwendung dokumentierter VueUse-Composables mit korrekter Berechtigungsbehandlung.

Element-Interaktionsfunktionen

Erstellen Sie verschiebbare Elemente, erkennen Sie Sichtbarkeit, verfolgen Sie die Mausposition und handhaben Sie Resize-Observer mit VueUse-Element-Composables für interaktive UIs.

جرّب هذه الموجهات

Grundlegende State-Implementierung 
Implementieren Sie eine Vue 3-Komponente, die ihren Wert in localStorage speichert. Verwenden Sie VueUse-Composables wo angemessen, um den Code prägnant zu halten.
Browser-Funktionsintegration 
Erstellen Sie eine Vue 3-Komponente, die es Benutzern ermöglicht, Text in die Zwischenablage zu kopieren, indem sie die Clipboard-API verwenden. Fügen Sie Fehlerbehandlung für Browser hinzu, die die API nicht unterstützen.
Element-Interaktion 
Erstellen Sie einen Modal-Dialog, der sich schließt, wenn außerhalb davon geklickt wird. Verwenden Sie VueUse, um Klicks außerhalb des Modal-Elements zu erkennen.
Komplexe Funktion mit mehreren Composables 
Erstellen Sie einen Dark-Mode-Schalter für eine Nuxt 3-Anwendung. Verwenden Sie VueUse, um die Benutzerpräferenz zu speichern, die Systempräferenz zu erkennen und den Übergang zu animieren.

أفضل الممارسات

  • Prüfen Sie immer die VueUse-Dokumentation auf die aktuellsten API-Details vor der Implementierung, da Composables sich über Versionen hinweg weiterentwickeln können.
  • Bevorzugen Sie AUTO-Aufruf-Composables für gängige Muster wie State, Elemente und Browser-APIs, um Boilerplate zu reduzieren.
  • Verwenden Sie EXTERNAL-Composables nur, wenn die erforderliche Abhängigkeit bereits installiert ist, oder fordern Sie die Installation explizit vom Benutzer an.

تجنب

  • Vermeiden Sie das Schreiben eigener Event-Listener, wenn useEventListener plattformübergreifend kompatible, ordnungsgemäß bereinigte Handler bietet.
  • Synchronisieren Sie localStorage nicht manuell mit Refs - verwenden Sie useStorage, das Reaktivität und Persistenz automatisch handhabt.
  • Vermeiden Sie imperatives DOM-Manipulation für gängige Muster; verwenden Sie Element-Composables wie useElementBounding stattdessen.

الأسئلة المتكررة

Installiert diese Skill VueUse?
Nein. Diese Skill bietet Anleitung zur Verwendung von VueUse-Composables. Für AUTO-Aufruf-Funktionen wird vorausgesetzt, dass VueUse verfügbar ist. Für EXTERNAL-Funktionen wird die Installation nur vorgeschlagen, wenn sie wirklich benötigt wird.
Welche Vue-Versionen werden unterstützt?
Diese Skill zielt auf Vue 3- und Nuxt 3-Projekte ab. VueUse Version 10+ erfordert Vue 3. Für Vue 2-Projekte verwenden Sie VueUse Version 9.x.
Wie verwende ich ein Composables, das hier nicht aufgeführt ist?
Diese Skill dokumentiert häufig verwendete Composables. Für zusätzliche Funktionen konsultieren Sie die offizielle VueUse-Dokumentation unter vueuse.org. Die gleichen Prinzipien gelten - prüfen Sie den Aufruftyp und folgen Sie den Referenzbeispielen.
Kann ich diese Composables in script setup verwenden?
Ja. Alle VueUse-Composables sind für die Composition API konzipiert und funktionieren nahtlos mit script setup. Sie geben Refs zurück, die direkt in Templates ohne .value verwendet werden können.
Wie handhabt diese Skill SSR (Server-Side Rendering)?
Einige Composables haben SSR-Überlegungen. Die Dokumentation weist darauf hin, wenn Nuxt 3 integrierte Alternativen hat (wie useStorage vs Nitro useStorage). Prüfen Sie immer die Referenznotizen für SSR-Vorbehalte.
Was passiert, wenn ein Browser eine Funktion nicht unterstützt?
Die meisten VueUse-Composables geben nullable Refs zurück oder haben Optionen für Fallback-Verhalten. Prüfen Sie die spezifische Composables-Dokumentation für graceful Degradation-Muster und Feature-Erkennung.

تفاصيل المطور

المؤلف

antfu

الترخيص

MIT

المستودع

https://github.com/antfu/skills/tree/main/skills/vueuse-functions/

مرجع

main

بنية الملفات

📁 references/

📄 computedAsync.md

📄 computedEager.md

📄 computedInject.md

📄 computedWithControl.md

📄 createEventHook.md

📄 createGenericProjection.md

📄 createGlobalState.md

📄 createInjectionState.md

📄 createProjection.md

📄 createRef.md

📄 createReusableTemplate.md

📄 createSharedComposable.md

📄 createTemplatePromise.md

📄 createUnrefFn.md

📄 extendRef.md

📄 from.md

📄 get.md

📄 injectLocal.md

📄 isDefined.md

📄 logicAnd.md

📄 logicNot.md

📄 logicOr.md

📄 makeDestructurable.md

📄 onClickOutside.md

📄 onElementRemoval.md

📄 onKeyStroke.md

📄 onLongPress.md

📄 onStartTyping.md

📄 provideLocal.md

📄 reactify.md

📄 reactifyObject.md

📄 reactiveComputed.md

📄 reactiveOmit.md

📄 reactivePick.md

📄 refAutoReset.md

📄 refDebounced.md

📄 refDefault.md

📄 refManualReset.md

📄 refThrottled.md

📄 refWithControl.md

📄 set.md

📄 syncRef.md

📄 syncRefs.md

📄 templateRef.md

📄 toObserver.md

📄 toReactive.md

📄 toRef.md

📄 toRefs.md

📄 tryOnBeforeMount.md

📄 tryOnBeforeUnmount.md

📄 tryOnMounted.md

📄 tryOnScopeDispose.md

📄 tryOnUnmounted.md

📄 unrefElement.md

📄 until.md

📄 useAbs.md

📄 useActiveElement.md

📄 useAnimate.md

📄 useArrayDifference.md

📄 useArrayEvery.md

📄 useArrayFilter.md

📄 useArrayFind.md

📄 useArrayFindIndex.md

📄 useArrayFindLast.md

📄 useArrayIncludes.md

📄 useArrayJoin.md

📄 useArrayMap.md

📄 useArrayReduce.md

📄 useArraySome.md

📄 useArrayUnique.md

📄 useAsyncQueue.md

📄 useAsyncState.md

📄 useAsyncValidator.md

📄 useAuth.md

📄 useAverage.md

📄 useAxios.md

📄 useBase64.md

📄 useBattery.md

📄 useBluetooth.md

📄 useBreakpoints.md

📄 useBroadcastChannel.md

📄 useBrowserLocation.md

📄 useCached.md

📄 useCeil.md

📄 useChangeCase.md

📄 useClamp.md

📄 useClipboard.md

📄 useClipboardItems.md

📄 useCloned.md

📄 useColorMode.md

📄 useConfirmDialog.md

📄 useCookies.md

📄 useCountdown.md

📄 useCounter.md

📄 useCssVar.md

📄 useCurrentElement.md

📄 useCycleList.md

📄 useDark.md

📄 useDateFormat.md

📄 useDebouncedRefHistory.md

📄 useDebounceFn.md

📄 useDeviceMotion.md

📄 useDeviceOrientation.md

📄 useDevicePixelRatio.md

📄 useDevicesList.md

📄 useDisplayMedia.md

📄 useDocumentVisibility.md

📄 useDraggable.md

📄 useDrauu.md

📄 useDropZone.md

📄 useElementBounding.md

📄 useElementByPoint.md

📄 useElementHover.md

📄 useElementSize.md

📄 useElementVisibility.md

📄 useEventBus.md

📄 useEventListener.md

📄 useEventSource.md

📄 useExtractedObservable.md

📄 useEyeDropper.md

📄 useFavicon.md

📄 useFetch.md

📄 useFileDialog.md

📄 useFileSystemAccess.md

📄 useFirestore.md

📄 useFloor.md

📄 useFocus.md

📄 useFocusTrap.md

📄 useFocusWithin.md

📄 useFps.md

📄 useFullscreen.md

📄 useFuse.md

📄 useGamepad.md

📄 useGeolocation.md

📄 useIDBKeyval.md

📄 useIdle.md

📄 useImage.md

📄 useInfiniteScroll.md

📄 useIntersectionObserver.md

📄 useInterval.md

📄 useIntervalFn.md

📄 useIpcRenderer.md

📄 useIpcRendererInvoke.md

📄 useIpcRendererOn.md

📄 useJwt.md

📄 useKeyModifier.md

📄 useLastChanged.md

📄 useLocalStorage.md

📄 useMagicKeys.md

📄 useManualRefHistory.md

📄 useMath.md

📄 useMax.md

📄 useMediaControls.md

📄 useMediaQuery.md

📄 useMemoize.md

📄 useMemory.md

📄 useMin.md

📄 useMounted.md

📄 useMouse.md

📄 useMouseInElement.md

📄 useMousePressed.md

📄 useMutationObserver.md

📄 useNavigatorLanguage.md

📄 useNetwork.md

📄 useNow.md

📄 useNProgress.md

📄 useObjectUrl.md

📄 useObservable.md

📄 useOffsetPagination.md

📄 useOnline.md

📄 usePageLeave.md

📄 useParallax.md

📄 useParentElement.md

📄 usePerformanceObserver.md

📄 usePermission.md

📄 usePointer.md

📄 usePointerLock.md

📄 usePointerSwipe.md

📄 usePrecision.md

📄 usePreferredColorScheme.md

📄 usePreferredContrast.md

📄 usePreferredDark.md

📄 usePreferredLanguages.md

📄 usePreferredReducedMotion.md

📄 usePreferredReducedTransparency.md

📄 usePrevious.md

📄 useProjection.md

📄 useQRCode.md

📄 useRafFn.md

📄 useRefHistory.md

📄 useResizeObserver.md

📄 useRound.md

📄 useRouteHash.md

📄 useRouteParams.md

📄 useRouteQuery.md

📄 useRTDB.md

📄 useScreenOrientation.md

📄 useScreenSafeArea.md

📄 useScriptTag.md

📄 useScroll.md

📄 useScrollLock.md

📄 useSessionStorage.md

📄 useShare.md

📄 useSortable.md

📄 useSorted.md

📄 useSpeechRecognition.md

📄 useSpeechSynthesis.md

📄 useSSRWidth.md

📄 useStepper.md

📄 useStorage.md

📄 useStorageAsync.md

📄 useStyleTag.md

📄 useSubject.md

📄 useSubscription.md

📄 useSum.md

📄 useSupported.md

📄 useSwipe.md

📄 useTemplateRefsList.md

📄 useTextareaAutosize.md

📄 useTextDirection.md

📄 useTextSelection.md

📄 useThrottledRefHistory.md

📄 useThrottleFn.md

📄 useTimeAgo.md

📄 useTimeAgoIntl.md

📄 useTimeout.md

📄 useTimeoutFn.md

📄 useTimeoutPoll.md

📄 useTimestamp.md

📄 useTitle.md

📄 useToggle.md

📄 useToNumber.md

📄 useToString.md

📄 useTransition.md

📄 useTrunc.md

📄 useUrlSearchParams.md

📄 useUserMedia.md

📄 useVibrate.md

📄 useVirtualList.md

📄 useVModel.md

📄 useVModels.md

📄 useWakeLock.md

📄 useWebNotification.md

📄 useWebSocket.md

📄 useWebWorker.md

📄 useWebWorkerFn.md

📄 useWindowFocus.md

📄 useWindowScroll.md

📄 useWindowSize.md

📄 useZoomFactor.md

📄 useZoomLevel.md

📄 watchArray.md

📄 watchAtMost.md

📄 watchDebounced.md

📄 watchDeep.md

📄 watchExtractedObservable.md

📄 watchIgnorable.md

📄 watchImmediate.md

📄 watchOnce.md

📄 watchPausable.md

📄 watchThrottled.md

📄 watchTriggerable.md

📄 watchWithFilter.md

📄 whenever.md

📄 LICENSE.md

📄 SKILL.md

📄 SYNC.md