vuluu2k/vue

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 explicit setup() functions.
• Prefer shallowRef over ref for performance if deep reactivity is not used.
• Discourage Reactive Props Destructure (use props.myProp instead).

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>