# Vue

> 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. Use when this capability is needed.

- Skill: `tomevault-io/vue-27` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/vue-27`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/vue-27/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/vue-27

---


# 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';
```

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/kriollo) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-16 -->