Vue Cheatsheet

<script setup>
import { ref, reactive, computed, watch, onMounted } from 'vue'

// ── Reactivity ──────────────────────────
const count = ref(0)               // .value in script, bare in template
const user = reactive({ name: 'Ada' })
const double = computed(() => count.value * 2)

watch(count, (now, prev) => console.log(now))
watch(() => user.name, n => {})    // watch a property
onMounted(() => {})                // lifecycle

// ── Props & events ──────────────────────
const props = defineProps({ title: String, n: { type: Number, default: 0 } })
const emit = defineEmits(['save'])
emit('save', payload)
const model = defineModel()        // v-model made easy
</script>

<template>
  <!-- ── Template syntax ─────────────── -->
  <h1>{{ count }} / {{ double }}</h1>
  <button @click="count++">add</button>
  <input v-model="user.name" />

  <div v-if="count > 5">big</div>
  <div v-else-if="count > 0">small</div>
  <div v-else>zero</div>
  <p v-show="visible">toggles CSS only</p>

  <li v-for="item in items" :key="item.id">{{ item.name }}</li>

  <img :src="url" :alt="desc" />          <!-- bind attrs -->
  <div :class="{ active: isOn }" :style="{ color }" />
  <input @keyup.enter="save" />            <!-- modifiers -->
  <slot />                                 <!-- children -->
</template>

// ── Composables — Vue's reusable logic ──
// useMouse.js
import { ref, onMounted, onUnmounted } from 'vue'
export function useMouse() {
  const x = ref(0), y = ref(0)
  const update = e => { x.value = e.pageX; y.value = e.pageY }
  onMounted(() => addEventListener('mousemove', update))
  onUnmounted(() => removeEventListener('mousemove', update))
  return { x, y }
}
// any component:  const { x, y } = useMouse()

// ── Pinia store (state management) ──────
export const useCart = defineStore('cart', () => {
  const items = ref([])
  const total = computed(() =>
    items.value.reduce((s, i) => s + i.price, 0))
  function add(item) { items.value.push(item) }
  return { items, total, add }
})

// ── Router essentials ───────────────────
// <RouterLink to="/about">  <RouterView />
// const route = useRoute()   route.params.id
// const router = useRouter() router.push('/home')