f5792c40be
Pulled ALL skills from 15 source repositories: - anthropics/skills: 16 (docs, design, MCP, testing) - obra/superpowers: 14 (TDD, debugging, agents, planning) - coreyhaines31/marketingskills: 25 (marketing, CRO, SEO, growth) - better-auth/skills: 5 (auth patterns) - vercel-labs/agent-skills: 5 (React, design, Vercel) - antfu/skills: 16 (Vue, Vite, Vitest, pnpm, Turborepo) - Plus 13 individual skills from various repos Mosaic Stack is not limited to coding — the Orchestrator and subagents serve coding, business, design, marketing, writing, logistics, analysis, and more. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
85 lines
2.4 KiB
Markdown
85 lines
2.4 KiB
Markdown
---
|
|
name: vue
|
|
description: 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.
|
|
metadata:
|
|
author: Anthony Fu
|
|
version: "2026.1.31"
|
|
source: Generated from https://github.com/vuejs/docs, scripts at https://github.com/antfu/skills
|
|
---
|
|
|
|
# Vue
|
|
|
|
> 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 Destructure
|
|
|
|
## Core
|
|
|
|
| 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) |
|
|
|
|
## Features
|
|
|
|
| Topic | Description | Reference |
|
|
|-------|-------------|-----------|
|
|
| Built-in Components & Directives | Transition, Teleport, Suspense, KeepAlive, v-memo, custom directives | [advanced-patterns](references/advanced-patterns.md) |
|
|
|
|
## Quick Reference
|
|
|
|
### Component Template
|
|
|
|
```vue
|
|
<script setup lang="ts">
|
|
import { ref, computed, watch, onMounted } from 'vue'
|
|
|
|
const props = defineProps<{
|
|
title: string
|
|
count?: number
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
update: [value: string]
|
|
}>()
|
|
|
|
const model = defineModel<string>()
|
|
|
|
const doubled = computed(() => (props.count ?? 0) * 2)
|
|
|
|
watch(() => props.title, (newVal) => {
|
|
console.log('Title changed:', newVal)
|
|
})
|
|
|
|
onMounted(() => {
|
|
console.log('Component mounted')
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div>{{ title }} - {{ doubled }}</div>
|
|
</template>
|
|
```
|
|
|
|
### Key Imports
|
|
|
|
```ts
|
|
// Reactivity
|
|
import { ref, shallowRef, computed, reactive, readonly, toRef, toRefs, toValue } from 'vue'
|
|
|
|
// Watchers
|
|
import { watch, watchEffect, watchPostEffect, onWatcherCleanup } from 'vue'
|
|
|
|
// Lifecycle
|
|
import { onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate, onBeforeUnmount } from 'vue'
|
|
|
|
// Utilities
|
|
import { nextTick, defineComponent, defineAsyncComponent } from 'vue'
|
|
```
|