Vue 3 Composition API: Modern Patterns for Scalable Applications

Vue 3 introduced the Composition API, a more flexible reactivity model that lets you organize logic by feature rather than by lifecycle options.

Why Composition API?

With Options API, related logic is scattered across data, methods, computed, and watch. Composition API groups all logic for a feature into a single function:

<script setup lang="ts">
import { ref, computed, watch } from 'vue'

const search = ref('')
const results = ref<string[]>([])
const isLoading = ref(false)

const hasQuery = computed(() => search.value.length > 2)

watch(search, async (val) => {
  if (!hasQuery.value) return
  isLoading.value = true
  results.value = await fetchResults(val)
  isLoading.value = false
})
</script>

Composables: the heart of reusability

Composables are functions that encapsulate reactive state and logic:

// useDebounce.ts
export function useDebounce<T>(value: Ref<T>, delay = 300) {
  const debounced = ref(value.value) as Ref<T>
  let timer: ReturnType<typeof setTimeout>

  watch(value, (val) => {
    clearTimeout(timer)
    timer = setTimeout(() => { debounced.value = val }, delay)
  })

  return { debounced }
}

Reactivity with shallowRef

For large lists, shallowRef avoids deep reactivity overhead:

import { shallowRef } from 'vue'

const products = shallowRef<Product[]>([])

async function loadProducts() {
  const data = await api.getProducts()
  products.value = data // only the trigger matters, not each property
}

Typed Provide / Inject

// injection-keys.ts
import type { InjectionKey, Ref } from 'vue'
export const AuthKey: InjectionKey<Ref<User | null>> = Symbol('auth')

Conclusion

The Composition API not only improves code organization but enables reuse patterns that were impossible with Options API. For enterprise Vue 3 projects, it’s the recommended standard.