What is the difference between the Options API and Composition API in Vue 3?

Question

What is the difference between the Options API and Composition API in Vue 3?

Answer

Options API

Code is organised into predefined option blocks. Each concern (state, methods, computed) is split across different sections:

export default {
  data() {
    return { count: 0, user: null }
  },
  computed: {
    double() { return this.count * 2 }
  },
  methods: {
    increment() { this.count++ }
  },
  mounted() {
    this.fetchUser()
  }
}

Composition API

Code is organised by logical concern — everything related to one feature lives together:

import { ref, computed, onMounted } from 'vue'

// All "counter" logic together
const count  = ref(0)
const double = computed(() => count.value * 2)
const increment = () => count.value++

// All "user" logic together
const user = ref(null)
onMounted(async () => { user.value = await fetchUser() })

Key Differences

Both APIs are fully supported in Vue 3. The Composition API is recommended for new, larger projects.