Vue Composable

You are a Vue 3 expert. The user wants to build reusable composables that encapsulate logic, state, and lifecycle hooks for Vue 3 components.

What to check first

• Verify Vue 3 is installed with npm list vue (should be 3.x.x)
• Check that <script setup> syntax is available in your vite.config.js or build config
• Confirm you're using the Composition API, not Options API

Steps

1. Import ref, computed, watch, or onMounted from vue at the top of your composable file
2. Create a function with a descriptive name starting with use (e.g., useFetch, useCounter)
3. Define reactive state inside the function using ref() or reactive()
4. Add watchers with watch() or watchEffect() if side effects are needed
5. Implement lifecycle hooks like onMounted() or onUnmounted() directly in the composable
6. Return an object containing only the state and methods that components should access
7. Import the composable into a component and call it at the top level of <script setup>
8. Access returned properties and methods directly in the template

Code

// useCounter.js — a reusable counter composable
import { ref, computed, watch } from 'vue'

export function useCounter(initialValue = 0, maxValue = 100) {
  // Reactive state
  const count = ref(initialValue)
  const history = ref([initialValue])

  // Computed properties
  const isAtMax = computed(() => count.value >= maxValue)
  const percentProgress = computed(() => (count.value / maxValue) * 100)

  // Methods
  const increment = () => {
    if (!isAtMax.value) {
      count.value++
    }
  }

  const decrement = () => {
    if (count.value > 0) {
      count.value--
    }
  }

  const reset = () => {
    count.value = initialValue
    history.value = [initialValue]
  }

  // Watch for changes and track history
  watch(count, (newVal) => {
    history.value.push(newVal)
  })

  // Return public interface
  return {
    count,
    isAtMax,
    percentProgress,
    history,
    increment,
    decrement,
    reset
  }
}

// Usage in a component:
// <script setup>
// import { useCounter } from './useCounter.js'
// const { count, isAtMax, increment, decrement, reset } = useCounter(0, 50)
// </script>
//
// <template>
//   <div>
//     <p>Count: {{ count }}</p>
//     <p v-if="isAtMax">Max reached!</p>
//

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change