vue-best-practices
Vue-3-Codequalität verbessern
In Vue-Projekten sammeln sich im Laufe der Zeit häufig Fehler bei Reaktivität, Komponenten und Performance an. Dieser Skill bietet gezielte Vue-3-Anleitung für sicherere Muster und klareren Code.
Mit meinem Agent installieren
Kopieren Sie diese Anfrage in Ihren Agent. Sie enthält die maßgebliche Skill-Seite und das Manifest.
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.Ihr Agent sollte weiterhin seinen Plan anzeigen und alle von der Sicherheitsrichtlinie verlangten Bestätigungen anfordern.
Agent-lesbare Ressourcen
Verwenden Sie diese Links, wenn ein KI-Agent, Crawler oder Skript sauberen Kontext benötigt, statt die vollständige Seite zu lesen.
Testen
„vue-best-practices“ wird verwendet. Eine Komponente mutiert props und führt Filterung direkt innerhalb eines template aus.
Erwartetes Ergebnis:
Die Antwort hebt Regeln für read-only props hervor, empfiehlt Updates per emit und verschiebt die Filterung in computed state für vorhersehbares Rendering.
„vue-best-practices“ wird verwendet. Eine Seite verwendet deep watchers, große Listen und transitions, die langsam wirken.
Erwartetes Ergebnis:
Die Antwort trennt watcher scope, list virtualization, stabile props und transform-basierte Animationen in priorisierte Korrekturen.
„vue-best-practices“ wird verwendet. Ein Team möchte SSR mit shared state und async components verwenden.
Erwartetes Ergebnis:
Die Antwort erklärt request-scoped stores, client-only API guards, Hydration-Timing und Auswahlmöglichkeiten beim Laden von async components.
Sicherheitsaudit
SicherAll 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.
Risikofaktoren
⚙️ Externe Befehle (80)
⚡ Enthält Skripte (31)
🌐 Netzwerkzugriff (46)
📁 Dateisystemzugriff (7)
Diesen Bericht teilen & zitieren
Teile den versionierten Bewertungsbericht, das neutrale Badge, die Einbettungskarte und Zitate. Skillstore berichtet Nachweise, ohne zu entscheiden, ob dieser Skill sicher ist.
Berichtslink kopieren
https://skillstore.io/skills/vuejs-ai-vue-best-practices/audits/6?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown-Badge
[](https://skillstore.io/skills/vuejs-ai-vue-best-practices?utm_source=security_passport_badge)HTML-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>Einbettungskarte
<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>Wissenschaftliche Zitate (APA · BibTeX · CFF)
APA-Zitat
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/6BibTeX-Zitat
@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}
}CITATION.cff
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"
Varianten vergleichen
3 installierbare VariantenJeder Autor bleibt ein eigener installierbarer Skill. Die empfohlene Variante wird nach Skillstore-Nachweisen bewertet.
Warum diese Variante zuerst steht
vuejs-ai-vue-best-practices
2026-09-09
hyf0-vue-best-practices
2026-09-09
antfu-vue-best-practices
2026-10-24
Skillstore-Score
Warum dieser Score Evidenzvertrauen: HochWas Sie erstellen können
Vue-Komponenten überprüfen
Finde Probleme mit Reaktivität, prop, emit, slot und template, bevor ein Pull Request gemergt wird.
Vue-3-Migration planen
Überführe Options API-Code in Richtung Composition API und script setup, während das Projektverhalten erhalten bleibt.
App-Performance verbessern
Diagnostiziere Fehlgebrauch von watchers, das Rendering großer Listen, transition-Kosten und Bedenken zur SSR-Hydration.
Diese Prompts ausprobieren
Nutze vue-best-practices, um diese Vue-Komponente auf Composition API, prop handling und template-Probleme zu überprüfen. Liste die wirkungsvollsten Korrekturen zuerst auf.
Nutze vue-best-practices, um diese Options API-Komponente in Vue 3 script setup mit TypeScript zu refaktorieren. Erhalte das Verhalten und erkläre Kompatibilitätsrisiken.
Nutze vue-best-practices, um Probleme mit Reaktivität, watchers, Listen-Rendering und transition-Performance in diesem Vue-Feature zu diagnostizieren. Empfiehl messbare Korrekturen.
Nutze vue-best-practices, um Vue SSR-Verbesserungen für Hydration, async components und request-isolated state zu planen. Beziehe Tests und rollout checks ein.
Bewährte Praktiken
- Teile die relevanten Vue-Dateien und beschreibe das aktuelle Laufzeitverhalten.
- Bitte bei Reviews großer Komponenten oder Migrationen um priorisierte Befunde.
- Validiere vorgeschlagene Änderungen mit Tests, type checks und Browserverhalten.
Vermeiden
- Bitte es nicht, Muster durchzusetzen, ohne Projektkonventionen zu prüfen.
- Kopiere Beispiele nicht, ohne sie an dein state model und routing setup anzupassen.
- Behandle Performance-Empfehlungen nicht als bewiesen, ohne den betroffenen Workflow zu messen.
Häufig gestellte Fragen
Unterstützt dieser Skill Vue 2?
Kann es TypeScript-Vue-Komponenten überprüfen?
Führt es linting oder Tests aus?
Kann es bei SSR-Problemen helfen?
Ist es für Performance-Arbeit nützlich?
Welche AI-Tools können es verwenden?
Entwicklerdetails
Autor
vuejs-aiLizenz
MIT
Autorenversion
v17.0.0
Skillstore-Revision
r1
Ref.
26421118b848d9f1efc0aa169d8a7a9e7e0a877e
Aktualität der Wartung
20.7.2026
Nutzung
104 Downloads · 981 Aufrufe
Dateistruktur
📄 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