vueuse-functions
Aplicar Composables VueUse para Vue.js
Criar recursos Vue.js do zero leva a código complexo e difícil de manter. Esta skill mapeia requisitos para composables VueUse, aplicando padrões corretos para manter implementações concisas, performantes e sustentáveis.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "vueuse-functions". Implement a Vue 3 component that tracks mouse position relative to a specific element.
Résultat attendu:
Use the useMouseInElement composable from VueUse. This composable provides reactive x/y coordinates of the mouse relative to the target element, plus isOutside boolean. Example: const { x, y, isOutside } = useMouseInElement(target) where target is a ref to the element.
Utilisation de "vueuse-functions". Add debounced search to an input field in my Vue 3 form.
Résultat attendu:
Use the useDebounceFn composable to wrap your search function. Import it from @vueuse/core and apply it to your search handler: const debouncedSearch = useDebounceFn(searchFunction, 300). Call debouncedSearch(value) in your input handler instead of the raw function.
Utilisation de "vueuse-functions". How do I detect when a user tabs away from my page?
Résultat attendu:
Use the useDocumentVisibility composable from VueUse. It returns a ref with the current visibilityState ('visible' or 'hidden'). Watch this ref to detect tab changes: const visibility = useDocumentVisibility(); watch(visibility, (v) => { if (v === 'visible') { /* user returned */ } })
Audit de sécurité
SûrAll 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.
Score de qualité
Ce que vous pouvez construire
Gerenciamento de Estado em Apps Vue 3
Implementa estado reativo usando composables VueUse como useLocalStorage, useSessionStorage, createGlobalState e useStorage para estado persistente e sincronizável entre componentes.
Integração com APIs de Navegador
Adiciona acesso a recursos do navegador como clipboard, geolocalização, dispositivos de mídia e armazenamento usando composables VueUse documentados com tratamento adequado de permissões.
Recursos de Interação com Elementos
Cria elementos arrastáveis, detecta visibilidade, rastreia posição do mouse e gerencia observadores de redimensionamento usando composables de elementos VueUse para UIs interativas.
Essayez ces prompts
Implementa um componente de contador em Vue 3 que persiste seu valor no localStorage. Usa composables VueUse quando apropriado para manter o código conciso.
Cria um componente Vue 3 que permite aos usuários copiar texto para a área de transferência usando a API Clipboard. Inclui tratamento de erros para navegadores que não suportam a API.
Constrói um diálogo modal que fecha ao clicar fora dele. Usa VueUse para detectar cliques fora do elemento modal.
Cria um alternador de modo escuro para uma aplicação Nuxt 3. Usa VueUse para persistir preferência do usuário, detectar preferência do sistema e animate a transição.
Bonnes pratiques
- Sempre verifique a documentação VueUse para os detalhes mais atuais da API antes da implementação, pois composables podem evoluir entre versões.
- Prefira composables de invocação AUTO para padrões comuns como estado, elementos e APIs de navegador para reduzir código boilerplate.
- Use composables EXTERNAL apenas quando a dependência necessária já está instalada, ou solicite explicitamente a instalação ao usuário.
Éviter
- Evite escrever event listeners personalizados quando useEventListener oferece handlers compatíveis entre navegadores e com limpeza adequada.
- Não sincronize localStorage manualmente com refs - use useStorage que trata reatividade e persistência automaticamente.
- Evite manipulação imperativa do DOM para padrões comuns; use composables de elementos como useElementBounding.
Foire aux questions
Esta skill instala VueUse?
Quais versões Vue são suportadas?
Como uso um composable não listado aqui?
Posso usar esses composables em script setup?
Como esta skill trata SSR (Server-Side Rendering)?
O que acontece se um navegador não suporta um recurso?
Détails du développeur
Structure de fichiers