Vue 3 Composition API: Essential Tips and Tricks

The Composition API is one of the most significant additions to Vue 3, offering a more flexible and powerful way to organize component logic. Here are some essential tips to help you master it.

1. Use Composables for Reusable Logic

Composables are the Vue 3 way of sharing stateful logic between components:

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

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  
  const increment = () => count.value++
  const decrement = () => count.value--
  const isEven = computed(() => count.value % 2 === 0)
  
  return {
    count,
    increment,
    decrement,
    isEven
  }
}

2. Organize Your Setup Function

Keep your

setup()

export default {
  setup() {
    // 1. Reactive state
    const user = ref(null)
    const loading = ref(false)
    
    // 2. Computed properties
    const fullName = computed(() => 
      user.value ? `${user.value.firstName} ${user.value.lastName}` : ''
    )
    
    // 3. Methods
    const fetchUser = async (id) => {
      loading.value = true
      try {
        user.value = await api.getUser(id)
      } finally {
        loading.value = false
      }
    }
    
    // 4. Lifecycle hooks
    onMounted(() => {
      fetchUser(1)
    })
    
    // 5. Return everything needed by template
    return {
      user,
      loading,
      fullName,
      fetchUser
    }
  }
}

3. Use Script Setup for Cleaner Code

The

<script setup>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useCounter } from '@/composables/useCounter'

const { count, increment, decrement } = useCounter(10)
const message = ref('Hello Vue 3!')

const uppercaseMessage = computed(() => message.value.toUpperCase())

onMounted(() => {
  console.log('Component mounted!')
})
</script>

<template>
  <div>
    <h1>{{ uppercaseMessage }}</h1>
    <p>Count: {{ count }}</p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>

4. Handle Side Effects Properly

Use

watchEffect

import { watchEffect, ref } from 'vue'

const searchQuery = ref('')
const results = ref([])

watchEffect(async () => {
  if (searchQuery.value) {
    results.value = await searchAPI(searchQuery.value)
  }
})

Conclusion

The Composition API opens up new possibilities for organizing and sharing logic in Vue applications. These patterns will help you write more maintainable and reusable code.

Happy coding with Vue 3!