Vue Composition API

Options API (Vue 2 style):          Composition API (Vue 3):

export default {                    <script setup>
  data() {                          // All feature code together
    return {                        const count = ref(0)
      count: 0,    ← scattered     const doubled = computed(...)
      name: &#039;'     ← feature A     function increment() {...}
    }                               </script>
  },
  computed: {
    doubled() {...}  ← scattered
    // also feature B code here
  },
  methods: {
    increment() {...} ← scattered
  }
}

Problem: In a 500-line component, all "counter" logic
is spread across data, computed, methods, watch.

Solution: Composition API groups all counter logic together.

<script setup>
// ✅ This is the MODERN way to write Vue 3 components
// Everything declared here is available in the template automatically

import { ref, reactive, computed, watch, onMounted } from &#039;vue'
import { useRoute } from &#039;vue-router'
import { useUserStore } from &#039;@/stores/user'

// Props — no need to return
const props = defineProps({
  title: String,
  initialCount: { type: Number, default: 0 }
})

// Emits
const emit = defineEmits([&#039;update', 'close'])

// Reactive state
const count = ref(props.initialCount)
const user = reactive({ name: &#039;Alice', role: 'admin' })

// Computed
const doubled = computed(() => count.value * 2)

// Store access
const userStore = useUserStore()

// Router
const route = useRoute()

// Methods
function increment() {
  count.value++
  emit(&#039;update', count.value)
}

// Lifecycle
onMounted(() => {
  console.log(&#039;Mounted with count:', count.value)
})

// Watch
watch(count, (newVal) => {
  if (newVal > 10) emit(&#039;close')
})

// Expose to parent (via template ref)
// By default, <script setup> is closed — nothing is exposed
defineExpose({ count, increment })
</script>

<template>
  <div>
    <h2>{{ title }}</h2>
    <p>Count: {{ count }} (doubled: {{ doubled }})</p>
    <button @click="increment">+</button>
  </div>
</template>

// src/composables/useFetch.js
import { ref } from 'vue'

export function useFetch(url) {
  const data = ref(null)
  const loading = ref(false)
  const error = ref(null)

  async function fetchData() {
    loading.value = true
    error.value = null
    try {
      const res = await fetch(url)
      if (!res.ok) throw new Error(`HTTP ${res.status}`)
      data.value = await res.json()
    } catch (err) {
      error.value = err.message
    } finally {
      loading.value = false
    }
  }

  fetchData()

  return { data, loading, error, refetch: fetchData }
}

// src/composables/useLocalStorage.js
import { ref, watch } from 'vue'

export function useLocalStorage(key, defaultValue) {
  const stored = localStorage.getItem(key)
  const value = ref(stored ? JSON.parse(stored) : defaultValue)

  watch(value, (newVal) => {
    localStorage.setItem(key, JSON.stringify(newVal))
  }, { deep: true })

  return value
}

// src/composables/useDebounce.js
import { ref, watch } from 'vue'

export function useDebounce(value, delay = 300) {
  const debouncedValue = ref(value.value)
  let timeout

  watch(value, (newVal) => {
    clearTimeout(timeout)
    timeout = setTimeout(() => {
      debouncedValue.value = newVal
    }, delay)
  })

  return debouncedValue
}

// src/composables/useCounter.js
import { ref, computed } from 'vue'

export function useCounter(initial = 0, options = {}) {
  const { min = -Infinity, max = Infinity, step = 1 } = options
  const count = ref(initial)
  const isMin = computed(() => count.value <= min)
  const isMax = computed(() => count.value >= max)

  function increment() { if (!isMax.value) count.value += step }
  function decrement() { if (!isMin.value) count.value -= step }
  function reset() { count.value = initial }
  function set(val) { count.value = Math.max(min, Math.min(max, val)) }

  return { count, isMin, isMax, increment, decrement, reset, set }
}

// src/composables/useMousePosition.js
import { ref, onMounted, onUnmounted } from 'vue'

export function useMousePosition() {
  const x = ref(0)
  const y = ref(0)

  function update(e) {
    x.value = e.clientX
    y.value = e.clientY
  }

  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))

  return { x, y }
}

<script setup>
// Clean component — all logic extracted to composables
import { useFetch } from &#039;@/composables/useFetch'
import { useLocalStorage } from &#039;@/composables/useLocalStorage'
import { useCounter } from &#039;@/composables/useCounter'
import { useMousePosition } from &#039;@/composables/useMousePosition'

// Reuse logic anywhere with zero code duplication
const { data: posts, loading, error } = useFetch(&#039;https://jsonplaceholder.typicode.com/posts?_limit=5')
const theme = useLocalStorage(&#039;theme', 'light')
const { count, increment, decrement } = useCounter(0, { min: 0, max: 10 })
const { x, y } = useMousePosition()
</script>

<template>
  <div :data-theme="theme">
    <button @click="theme = theme === &#039;light' ? 'dark' : 'light'">Toggle Theme</button>
    <p>Mouse: {{ x }}, {{ y }}</p>
    <p>Count: {{ count }}</p>
    <button @click="decrement">-</button>
    <button @click="increment">+</button>
    <ul v-if="!loading">
      <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
    </ul>
  </div>
</template>