Vue Skill Security Audit
What the author says it does (original text)
Vue 3 Composition API, script setup macros, reactivity system, and built-in components. Use when writing Vue SFCs, defineProps/defineEmits/defineModel, watchers, or using Transition/Teleport/Suspense/KeepAlive.
No obvious risks found in this check
- Files checked
- 5
- Risks found
- 0
Inside this skill
This Skill is a Vue 3 programming reference that directs the agent to prefer TypeScript, the Composition API, and `<script setup>`; it does not instruct the agent to run installers, change system settings, or access user credentials.
View source
> Based on Vue 3.5. Always use Composition API with `<script setup lang="ts">`.## Preferences- Prefer TypeScript over JavaScript- Prefer `<script setup lang="ts">` over `<script>`- For performance, prefer `shallowRef` over `ref` if deep reactivity is not needed- Always use Composition API over Options API- Discourage using Reactive Props DestructureThe main file only routes Vue topics to three included reference files, and the supplied manifest shows that all three references are present.
View source
| Topic | Description | Reference ||-------|-------------|-----------|| Script Setup & Macros | `<script setup>`, defineProps, defineEmits, defineModel, defineExpose, defineOptions, defineSlots, generics | [script-setup-macros](references/script-setup-macros.md) || Reactivity & Lifecycle | ref, shallowRef, computed, watch, watchEffect, effectScope, lifecycle hooks, composables | [core-new-apis](references/core-new-apis.md) || Topic | Description | Reference ||-------|-------------|-----------|| Built-in Components & Directives | Transition, Teleport, Suspense, KeepAlive, v-memo, custom directives | [advanced-patterns](references/advanced-patterns.md) |The references contain `fetch` examples targeting relative API paths. They appear inside code fences as patterns for generated Vue components, not as instructions to send requests during the audit; a request would occur only when resulting application code is run.
View source
watchEffect(async () => { const controller = new AbortController() // Cleanup on re-run or unmount (Vue 3.5+) onWatcherCleanup(() => controller.abort()) const res = await fetch(`/api/${id.value}`, { signal: controller.signal }) data.value = await res.json()})## Top-level awaitUse `await` directly in `<script setup>`. The component becomes async and must be used with `<Suspense>`.```vue<script setup lang="ts">const data = await fetch('/api/data').then(r => r.json())</script>```The custom-directive examples manipulate the focus or styling of their bound DOM elements, but their shown scope is the application's page DOM; they do not show file access, persistent changes, or browser-permission bypasses.
View source
```ts// Directive definitionconst vFocus: Directive<HTMLElement> = { mounted: (el) => el.focus()}// Full hooksconst vColor: Directive<HTMLElement, string> = { created(el, binding, vnode, prevVnode) {}, beforeMount(el, binding) {}, mounted(el, binding) { el.style.color = binding.value }, beforeUpdate(el, binding) {}, updated(el, binding) { el.style.color = binding.value }, beforeUnmount(el, binding) {},File reference map
References: 3Files and check records5 files
Coverage and gaps
Content covered in each file
These are the source ranges included in this check, not a guarantee that every issue has been resolved.
SKILL.mdFull text includedreferences/advanced-patterns.mdFull text includedreferences/core-new-apis.mdFull text includedreferences/script-setup-macros.mdFull text includedGENERATION.mdFull text included
This report is for the version above. We read the available code and instructions without running the skill or checking extra packages it installs. This is not a promise of safety: a different version or setup may behave differently.
GENERATION.mdSupporting fileSKILL.mdInstructionsreferences/advanced-patterns.mdSupporting filereferences/core-new-apis.mdSupporting filereferences/script-setup-macros.mdSupporting file
Operations mentioned in code and instructions
Connect to websites
version: "2026.1.31" source: Generated from https://github.com/vuejs/docs, scripts at https://github.com/antfu/skills---<script setup lang="ts">const data = await fetch('/api/data').then(r => r.json())</script>Source references:- https://vuejs.org/api/built-in-components.html- https://vuejs.org/guide/built-ins/transition.html- Lines read
- 876
- File checksum (to compare versions)
- 128a6c634cc11f393b565728af3699e716105f5c71d331c1c6418baad91755d4