tomevault-io Vue 3 (Composition API)
This skill focuses on the Composition API and
<script setup>explicitly strongly typed with TypeScript.
Key Rules (from instructions)
- Prefer TypeScript over JavaScript (
<script setup lang="ts">). - Always use Composition API over Options API.
- Prefer
<script setup>over explicitsetup()functions. - Prefer
shallowRefoverreffor performance if deep reactivity is not used. - Discourage Reactive Props Destructure (use
props.myPropinstead).
Core
| Topic | Description | Reference |
|---|---|---|
| State & Reactivity | shallowRef, ref, computed, watch |
state |
| Props & Emits | defineProps (no destructuring), defineEmits |
props-emits |
| Lifecycle Hooks | onMounted, onUpdated, onUnmounted |
lifecycle |
Features & Patterns
| Topic | Description | Reference |
|---|---|---|
| Composables | State logic reuse (instead of Mixins) | composables |
| Provide / Inject | Dependency injection across deep component trees | provide-inject |
Quick Reference
Full SFC Template (<script setup>)
<script setup lang="ts">
import { shallowRef, computed, watch, onMounted } from 'vue'
// -- Props & Emits --
interface Props {
title: string
count?: number
}
// ❌ Do NOT destructure props, keep the `props` object
const props = withDefaults(defineProps<Props>(), {
count: 0
})
const emit = defineEmits<{
update: [newCount: number]
}>()
// -- State --
// ✅ Prefer shallowRef if deep tracking isn't needed
const localCount = shallowRef(props.count)
// -- Computed --
const doubled = computed(() => localCount.value * 2)
// -- Watchers --
watch(() => props.count, (newVal) => {
localCount.value = newVal
})
// -- Methods --
function increment() {
localCount.value++
emit('update', localCount.value)
}
// -- Lifecycle --
onMounted(() => {
console.log('Component mounted')
})
</script>
<template>
<div>
<h1>{{ props.title }}</h1>
<p>Count: {{ localCount }} | Doubled: {{ doubled }}</p>
<button @click="increment">Increment</button>
</div>
</template>
Source: vuluu2k/skills — distributed by TomeVault.