vue-options-api-best-practices
81Mejorar componentes de Vue Options API
Los proyectos de Vue Options API pueden perder seguridad de tipos y una vinculación correcta de this. Esta skill ofrece patrones directos para componentes Vue más seguros.
Mejorar la calidad del código Vue 3
Los proyectos Vue suelen acumular errores de reactividad, componentes y rendimiento con el tiempo. Esta skill ofrece orientación específica de Vue 3 para patrones más seguros y código más claro.
Copia esta solicitud en tu Agente. Incluye la página canónica del Skill y el manifiesto.
Review the Skillstore skill "vue-best-practices" from https://skillstore.io/skills/vuejs-ai-vue-best-practices.md and its manifest at https://skillstore.io/api/skills/vuejs-ai-vue-best-practices/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Tu Agente debe seguir mostrando su plan y solicitar cualquier confirmación exigida por la política de seguridad.
Usa estos enlaces cuando un agente de IA, crawler o script necesite contexto limpio en vez de leer la página completa.
Usando "vue-best-practices". Un componente muta props y realiza filtrado directamente dentro de un template.
Resultado esperado:
La respuesta destaca las reglas de props de solo lectura, recomienda actualizaciones emitidas y mueve el filtrado a estado computed para un renderizado predecible.
Usando "vue-best-practices". Una página usa deep watchers, listas grandes y transiciones que se sienten lentas.
Resultado esperado:
La respuesta separa el alcance de watchers, la virtualización de listas, props estables y animaciones basadas en transform en correcciones priorizadas.
Usando "vue-best-practices". Un equipo quiere usar SSR con estado compartido y componentes async.
Resultado esperado:
La respuesta explica stores con alcance por request, protecciones para APIs solo del cliente, timing de hidratación y opciones de carga de componentes async.
All static findings reviewed as false positives from Markdown reference examples, Vue template literals, or defensive security guidance. No prompt injection attempt, exfiltration intent, command execution path, or executable malware behavior was found in the reviewed skill content.
Comparte el informe de evaluación versionado, la insignia neutral, la tarjeta insertable y las citas. Skillstore presenta evidencias sin decidir si este Skill es seguro.
https://skillstore.io/skills/vuejs-ai-vue-best-practices/audits/6?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/vuejs-ai-vue-best-practices?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/vuejs-ai-vue-best-practices?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/vuejs-ai-vue-best-practices/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/vuejs-ai-vue-best-practices.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>vuejs-ai. (2026). vue-best-practices security audit report (audit version 6) [Author version 17.0.0]. Skillstore. https://skillstore.io/skills/vuejs-ai-vue-best-practices/audits/6@techreport{vuejs-ai-vuejs-ai-vue-best-practices-2026,
author = {vuejs-ai},
title = {vue-best-practices security audit report (audit version 6)},
institution = {Skillstore},
year = {2026},
number = {6},
url = {https://skillstore.io/skills/vuejs-ai-vue-best-practices/audits/6},
note = {Author version 17.0.0}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "vue-best-practices security audit report (audit version 6)"
version: "17.0.0"
type: report
authors:
- name: "vuejs-ai"
date-released: "2026-07-09"
url: "https://skillstore.io/skills/vuejs-ai-vue-best-practices/audits/6"
identifiers:
- type: other
value: "skillstore:vuejs-ai-vue-best-practices:audit:6"
description: "Skillstore immutable audit report identifier"
Cada autor sigue siendo un skill instalable independiente. La variante recomendada se ordena según la evidencia de Skillstore.
Por qué esta variante es la primera
vuejs-ai-vue-best-practices
2026-09-09
hyf0-vue-best-practices
2026-09-09
antfu-vue-best-practices
2026-09-09
Encuentra problemas de reactividad, props, emits, slots y templates antes de fusionar una pull request.
Mueve código de Options API hacia Composition API y script setup mientras preservas el comportamiento del proyecto.
Diagnostica uso incorrecto de watchers, renderizado de listas grandes, costo de transiciones y problemas de hidratación SSR.
Usa vue-best-practices para revisar este componente Vue en busca de problemas con Composition API, manejo de props y templates. Enumera primero las correcciones de mayor impacto.
Usa vue-best-practices para refactorizar este componente Options API a Vue 3 script setup con TypeScript. Preserva el comportamiento y explica los riesgos de compatibilidad.
Usa vue-best-practices para diagnosticar problemas de reactividad, watchers, renderizado de listas y rendimiento de transiciones en esta funcionalidad Vue. Recomienda correcciones medidas.
Usa vue-best-practices para planificar mejoras de Vue SSR relacionadas con hidratación, componentes async y estado aislado por request. Incluye pruebas y verificaciones de despliegue gradual.
Autor
vuejs-aiLicencia
MIT
Versión del autor
v17.0.0
Revisión de Skillstore
r1
Ref.
26421118b848d9f1efc0aa169d8a7a9e7e0a877e
Actualidad del mantenimiento
18/7/2026
Uso
103 descargas · 981 vistas
Estructura de archivos
📄 animation-class-based-technique.md
📄 animation-key-for-rerender.md
📄 animation-state-driven-technique.md
📄 animation-transitiongroup-performance.md
📄 async-component-hydration-strategies.md
📄 async-component-loading-delay.md
📄 async-component-suspense-control.md
📄 async-component-vue-router.md
📄 attrs-hyphenated-property-access.md
📄 avoid-prop-drilling-use-provide-inject.md
📄 component-events-dont-bubble.md
📄 component-naming-pascalcase.md
📄 composable-avoid-hidden-side-effects.md
📄 composable-composition-pattern.md
📄 composable-naming-return-pattern.md
📄 composable-options-object-pattern.md
📄 composable-readonly-state.md
📄 composable-vs-utility-functions.md
📄 composition-api-bundle-size-minification.md
📄 composition-api-code-organization.md
📄 composition-api-mixins-replacement.md
📄 composition-api-not-functional-programming.md
📄 composition-api-options-api-coexistence.md
📄 composition-api-vs-react-hooks-differences.md
📄 computed-conditional-dependencies.md
📄 computed-properties-for-class-logic.md
📄 computed-return-value-readonly.md
📄 computed-vs-methods-caching.md
📄 definemodel-hidden-modifier-props.md
📄 definemodel-value-next-tick.md
📄 directive-arguments-read-only.md
📄 directive-avoid-on-components.md
📄 directive-cleanup-in-unmounted.md
📄 directive-function-shorthand.md
📄 directive-naming-v-prefix.md
📄 directive-prefer-declarative-templating.md
📄 directive-vs-component-decision.md
📄 directive-vue2-migration-hooks.md
📄 dynamic-component-registration-vite.md
📄 dynamic-components-with-keepalive.md
📄 emit-kebab-case-in-templates.md
📄 emit-validation-for-complex-payloads.md
📄 event-once-modifier-for-single-use.md
📄 exact-modifier-for-precise-shortcuts.md
📄 keepalive-component-name-requirement.md
📄 keepalive-memory-management.md
📄 keepalive-no-cache-removal-vue3.md
📄 keepalive-router-fresh-vs-cached.md
📄 keepalive-router-nested-double-mount.md
📄 keepalive-transition-memory-leak.md
📄 lifecycle-hooks-synchronous-registration.md
📄 mouse-button-modifiers-intent.md
📄 perf-avoid-component-abstraction-in-lists.md
📄 perf-computed-object-stability.md
📄 perf-props-stability-update-optimization.md
📄 perf-ssr-ssg-for-page-load.md
📄 perf-v-once-v-memo-directives.md
📄 perf-virtualize-large-lists.md
📄 plugin-prefer-provide-inject-over-global-properties.md
📄 plugin-structure-install-method.md
📄 plugin-symbol-injection-keys.md
📄 plugin-typescript-type-augmentation.md
📄 prefer-local-component-registration.md
📄 prefer-props-emit-over-component-refs.md
📄 prop-boolean-casting-order.md
📄 prop-composable-reactivity-loss.md
📄 prop-destructured-watch-getter.md
📄 prop-validation-before-instance.md
📄 provide-inject-mutations-in-provider.md
📄 provide-inject-symbol-keys.md
📄 reactivity-computed-over-watcheffect-mutations.md
📄 reactivity-external-state-integration.md
📄 reactivity-markraw-for-non-reactive.md
📄 reactivity-proxy-identity-hazard.md
📄 reactivity-same-tick-batching.md
📄 refs-in-collections-need-value.md
📄 render-function-avoid-internal-vnode-properties.md
📄 render-function-custom-directives.md
📄 render-function-event-modifiers.md
📄 render-function-functional-components.md
📄 render-function-v-for-keys-required.md
📄 render-function-v-model-implementation.md
📄 render-function-vnodes-must-be-unique.md
📄 rendering-excessive-rerenders-watch-vs-computed.md
📄 rendering-prefer-templates-over-render-functions.md
📄 rendering-render-function-h-import-vue3.md
📄 rendering-render-function-return-from-setup.md
📄 rendering-render-function-slots-as-functions.md
📄 rendering-resolve-component-for-string-names.md
📄 rendering-understand-vdom-block-structure.md
📄 self-referencing-component-name.md
📄 sfc-recommended-for-build-projects.md
📄 sfc-scoped-css-child-component-styling.md
📄 sfc-scoped-css-dynamic-content.md
📄 sfc-scoped-css-performance.md
📄 sfc-scoped-css-slot-content.md
📄 sfc-separation-of-concerns-colocate.md
📄 shallow-ref-for-performance.md
📄 slot-conditional-rendering-with-slots.md
📄 slot-define-slots-for-typescript.md
📄 slot-fallback-content-default-values.md
📄 slot-implicit-default-content.md
📄 slot-named-scoped-explicit-default.md
📄 slot-render-scope-parent-only.md
📄 slot-renderless-components-vs-composables.md
📄 slot-v-slot-on-components-or-templates-only.md
📄 ssr-custom-directive-getssrprops.md
📄 ssr-platform-specific-apis.md
📄 state-ssr-cross-request-pollution.md
📄 suspense-events-for-state-tracking.md
📄 suspense-experimental-api-stability.md
📄 suspense-fallback-not-immediate-on-revert.md
📄 suspense-nested-suspensible-prop.md
📄 suspense-nesting-order-with-router.md
📄 suspense-revert-only-on-root-change.md
📄 suspense-single-child-requirement.md
📄 tailwind-dynamic-class-generation.md
📄 teleport-css-positioning-issues.md
📄 teleport-disabled-for-responsive.md
📄 teleport-logical-hierarchy-preserved.md
📄 teleport-multiple-to-same-target.md
📄 teleport-scoped-styles-limitation.md
📄 template-functions-no-side-effects.md
📄 template-ref-unwrapping-top-level.md
📄 transition-animate-transform-opacity.md
📄 transition-group-flip-inline-elements.md
📄 transition-group-key-requirement.md
📄 transition-group-move-animation-position-absolute.md
📄 transition-group-no-default-wrapper-vue3.md
📄 transition-group-no-mode-prop.md
📄 transition-group-staggered-animations.md
📄 transition-js-hooks-done-callback.md
📄 transition-key-for-same-element.md
📄 transition-nested-duration.md
📄 transition-reusable-scoped-style.md
📄 transition-router-view-appear.md
📄 transition-single-element-slot.md
📄 transition-type-when-mixed.md
📄 transition-unmount-hook-timing.md
📄 ts-component-ref-typeof-instancetype.md
📄 ts-custom-directive-type-augmentation.md
📄 ts-defineemits-type-based-syntax.md
📄 ts-defineprops-boolean-default-false.md
📄 ts-defineprops-imported-types-limitations.md
📄 ts-defineprops-type-based-declaration.md
📄 ts-event-handler-explicit-typing.md
📄 ts-provide-inject-injection-key.md
📄 ts-reactive-no-generic-argument.md
📄 ts-shallowref-for-dynamic-components.md
📄 ts-template-ref-null-handling.md
📄 ts-withdefaults-mutable-factory-function.md
📄 v-for-use-computed-for-filtering.md
📄 v-if-vs-v-show-performance.md
📄 v-model-vue3-breaking-changes.md
📄 watch-deep-same-object-reference.md
📄 watch-reactive-property-getter.md
📄 watcheffect-async-dependency-tracking.md
📄 watcheffect-flush-post-for-refs.md
📄 SKILL.md
Mejorar componentes de Vue Options API
Los proyectos de Vue Options API pueden perder seguridad de tipos y una vinculación correcta de this. Esta skill ofrece patrones directos para componentes Vue más seguros.
Crear composables de Vue adaptables
Los composables de Vue suelen fallar cuando quienes los llaman pasan una combinación de valores simples, refs y getters. Esta skill guía a Claude, Codex y Claude Code para diseñar composables reutilizables con reactividad de Vue predecible.
Mejorar los patrones de stores de Vue Pinia
Las aplicaciones Vue suelen fallar porque la configuración del store, la desestructuración y las reglas de estado en la URL son fáciles de pasar por alto. Esta skill ofrece a Claude, Codex y Claude Code orientación enfocada sobre Pinia para stores fiables y reactividad predecible.
Mejorar las prácticas de testing en Vue
Las suites de pruebas de Vue a menudo se vuelven inestables, frágiles o difíciles de configurar. Esta skill ofrece orientación enfocada para crear pruebas confiables en Vue 3 usando Vitest, Vue Test Utils, Pinia, helpers asíncronos y Playwright.
Mejorar los guards de navegación de Vue Router
Los problemas de Vue Router pueden crear datos obsoletos, redirecciones rotas y comprobaciones de ruta débiles. Esta habilidad ofrece patrones enfocados para guards, parámetros, limpieza y enrutamiento en producción.
Crea mejores componentes Vue y Nuxt
Los proyectos Vue y Nuxt suelen sufrir de estado poco claro, componentes frágiles y flujo de datos inconsistente. Esta habilidad guía a los asistentes de IA hacia patrones prácticos de Vue 3 y Nuxt 3.
Desarrolla funcionalidades frontend listas para producción
por davila7
Los equipos de frontend necesitan directrices coherentes sobre React y Next.js en todos sus proyectos. Esta habilidad proporciona flujos de trabajo de referencia, prácticas de calidad y scripts auxiliares para el análisis del frontend.
Mejorar la cobertura de pruebas de Playwright
por C0ntr0lledCha0s
Las suites de Playwright pueden volverse inestables cuando la configuración, los localizadores y las fixtures son incoherentes. Esta skill ofrece patrones prácticos para pruebas de navegador fiables, depuración y objetos de página reutilizables.
Crea aplicaciones de Starknet con starknet.js
por internet-court
Las integraciones con Starknet requieren un manejo preciso de proveedores, cuentas, transacciones y comisiones. Esta skill proporciona a Claude, Codex y Claude Code patrones prácticos de starknet.js v9.
Optimiza el rendimiento de Go con perfilado
por 89jobrien
Los servicios Go pueden volverse lentos o consumir mucha memoria sin evidencia clara. Esta skill guía el perfilado, el análisis de asignaciones, el ajuste de concurrencia y la optimización basada en benchmarks.
Crear componentes React con seguridad de tipos
por softaworks
El trabajo con React TypeScript suele necesitar tipos precisos para eventos, hooks y rutas. Esta skill proporciona patrones enfocados para componentes tipados, APIs de React 19 y enrutamiento.
Crea mejores funcionalidades con SwiftUI
por avdlee
Los proyectos de SwiftUI pueden acumular API obsoletas, estado frágil y actualizaciones de vista lentas. Esta habilidad ofrece orientación enfocada para escribir código SwiftUI moderno y mantenible.