Vue 3 Composition API: Complete Guide with Real-World Patterns

Vue 3 Composition API

The Composition API organizes code by logical concern.

ref and reactive

const count = ref(0)
count.value++
const state = reactive({ user: null })
state.user = { name: 'Alice' }

Composables

export function useFetch(url) {
  const data = ref(null)
  watchEffect(async () => {
    const res = await fetch(toValue(url))
    data.value = await res.json()
  })
  return { data }
}

script setup

<script setup lang="ts">
const props = withDefaults(defineProps<{ title: string }>(), {})
const emit = defineEmits<{ close: [] }>()
</script>

-> Format config with the JSON Viewer.