vue-skilld

Q: How do I install vue-skilld?

Run npx skills add https://github.com/skilld-dev/vue-ecosystem-skills --skill vue-skilld in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/vue-skilld/ (personal) or .claude/skills/vue-skilld/ (project).

by skilld-devFrontend & Design

Build, debug, and modernize UI with Vue 3.6. Use when editing .vue files, writing components or composables, or working with code that imports "vue". Covers script setup, reactivity, Vapor Mode, SSR, and version-specific API changes from 3.4 through 3.6.0-beta.17.

Installs: 399
Last 24h: +8
Trending rank: #9772
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/skilld-dev/vue-ecosystem-skills --skill vue-skilld

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads vue-skilld automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

vue 3.6.0-beta.17 (vuejs/core)

Pre-release beta of the 3.6 line. Two headline changes vs 3.5:

Vapor Mode, an opt-in compilation strategy for SFCs that skips the Virtual DOM; see Vapor Mode.
alien-signals reactivity refactor: @vue/reactivity was rebuilt on alien-signals for lower memory use and faster updates. No public API changes.

Package facts (from the prepared source):

Version: package.json:3.
The main entry re-exports @vue/runtime-dom AND @vue/runtime-vapor, so all Vapor APIs (createVaporApp, vaporInteropPlugin, defineVaporComponent) import from plain vue: dist/vue.d.ts:4-5.
Named exports added by the vue package itself: compile, defineVaporAsyncComponent, withAsyncContext: dist/vue.runtime.esm-bundler.js:12.
Subpath exports: vue/server-renderer, vue/compiler-sfc, vue/jsx-runtime, vue/jsx: package.json:36-68.
TypeScript is an optional peer dependency (*): package.json:107-113.

Common tasks

Component with <script setup>, reactive props destructure, and defineModel:

<script setup lang="ts">
const { count = 0 } = defineProps<{ count?: number }>()
const model = defineModel<string>({ default: '' })
</script>

<template>
  <input v-model="model" />
  <p>{{ count }}</p>
</template>

Template refs (3.5+ pattern):

import { useTemplateRef } from 'vue'
const input = useTemplateRef('my-input') // matches ref="my-input" in template

Watch with cleanup (3.5+):

import { watch, onWatcherCleanup } from 'vue'
watch(id, () => {
  const controller = new AbortController()
  load(id.value, controller)
  onWatcherCleanup(() => controller.abort())
})

Composable that accepts a value, ref, or getter:

import { toValue, type MaybeRefOrGetter } from 'vue'
function useDouble(source: MaybeRefOrGetter<number>) {
  return computed(() => toValue(source) * 2)
}

Lazy hydration for SSR (3.5+):

import { defineAsyncComponent, hydrateOnVisible } from 'vue'
const Heavy = defineAsyncComponent({
  loader: () => import('./Heavy.vue'),
  hydrate: hydrateOnVisible(),
})

Version rules that change what you write

Full list with citations in API changes. The ones that break old code:

Reactivity Transform ($ref, $computed) was removed in 3.4. Use plain ref/computed, or the Vue Macros plugin.
@vnodeXXX listeners are a compiler error since 3.4. Use @vue:mounted style listeners.
Global JSX namespace is no longer registered since 3.4. Set jsxImportSource: "vue" in tsconfig, or import vue/jsx.
In Vapor components (3.6), Options API, app.config.globalProperties, getCurrentInstance(), v-memo, and @vue:xxx element lifecycle events do not work.
Vapor event delegation is on by default in beta.17: stopPropagation() in an ancestor can cancel delegated handlers. Disable per build with compilerOptions.eventDelegation (added in beta.15, #14924). Note: rc.2 replaced this with an opt-in .delegate modifier (release notes).

Bundler and dist notes

Bundlers resolve the runtime-only build; templates in .vue files are pre-compiled. For runtime template compilation (in-DOM templates or template strings), alias vue to vue/dist/vue.esm-bundler.js.
Replace __VUE_OPTIONS_API__, __VUE_PROD_DEVTOOLS__, __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ at build time for correct tree-shaking (compile-time flags).
In Node CJS, importing vue/compiler-sfc auto-registers TypeScript via registerTS(() => require('typescript')) when resolvable: compiler-sfc/register-ts.js:1-3.

Details, dist-file selection, and the export catalog: API surface.

References

API surface: entry points, dist builds, feature flags, export catalog.
Vapor Mode: opt-in, interop, constraints, directives, event delegation.
API changes 3.4 to 3.6: new, stable, and removed APIs per version, with citations.
Best practices: composable and performance patterns proven against the official docs.

FAQ

What does the vue-skilld skill do?

How do I install vue-skilld?

Run npx skills add https://github.com/skilld-dev/vue-ecosystem-skills --skill vue-skilld in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/vue-skilld/ (personal) or .claude/skills/vue-skilld/ (project).

Which AI agents can use vue-skilld?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is vue-skilld safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains vue-skilld?

It is published by skilld-dev in skilld-dev/vue-ecosystem-skills. It has 399 recorded installs.