Composables

Wat is een composable?

Een composable is gewoon een JavaScript-functie die reactive state en functies teruggeeft, zodat je ze kunt hergebruiken in meerdere componenten.

Wanneer gebruik je een composable?

Als je dezelfde logica in meerdere componenten gebruikt:

• Counter (count up/down/reset)
• Window size bijhouden
• localStorage syncen
• Data ophalen met loading/error states
• Een toast/notificatie systeem

Je eerste composable

Stel je gebruikt een teller in meerdere componenten. Zonder composable schrijf je elke keer hetzelfde:

<!-- Component A -->
<script setup>
import { ref } from 'vue'

const count = ref(0)
const increment = () => count.value++
const reset = () => count.value = 0
</script>

<!-- Component B -->
<script setup>
import { ref } from 'vue'

const count = ref(0)
const increment = () => count.value++
const reset = () => count.value = 0
</script>

Duplicatie. Trek het uit in een composable:

1. Maak het bestand

src/
└── composables/
    └── useCounter.js

2. Schrijf de composable

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

export function useCounter(startValue = 0) {
  const count = ref(startValue)

  const increment = () => count.value++
  const decrement = () => count.value--
  const reset = () => count.value = startValue

  return {
    count,
    increment,
    decrement,
    reset
  }
}

Gebruiken in een component

In elk component dat de teller nodig heeft: importeren en aanroepen.

<script setup>
import { useCounter } from '@/composables/useCounter'

const { count, increment, decrement, reset } = useCounter(10)
</script>

<template>
  <p>Count: {{ count }}</p>
  <button @click="increment">+1</button>
  <button @click="decrement">−1</button>
  <button @click="reset">Reset</button>
</template>

Voorbeeld: useLocalStorage

Een veel-gebruikte composable: een ref die automatisch synct met localStorage.

// src/composables/useLocalStorage.js
import { ref, watch } from 'vue'

export function useLocalStorage(key, defaultValue) {
  // Lees uit localStorage, of gebruik default
  const stored = localStorage.getItem(key)
  const initial = stored !== null ? JSON.parse(stored) : defaultValue

  const value = ref(initial)

  // Sync bij elke wijziging
  watch(value, (newVal) => {
    localStorage.setItem(key, JSON.stringify(newVal))
  }, { deep: true })

  return value
}

Gebruik

<script setup>
import { useLocalStorage } from '@/composables/useLocalStorage'

// Ref die automatisch saved in localStorage
const username = useLocalStorage('username', '')
const todos = useLocalStorage('todos', [])
</script>

<template>
  <input v-model="username" />
  <!-- Bij elke wijziging: opgeslagen in localStorage -->
  <!-- Bij refresh: waarde wordt teruggehaald -->
</template>

VueUse — kant-en-klare composables

Voordat je een composable zelf bouwt: check VueUse. Dat is een library met 200+ kant-en-klare composables voor de meeste dingen die je nodig hebt.

npm install @vueuse/core

<script setup>
import { useLocalStorage, useWindowSize, useDark } from '@vueuse/core'

const username = useLocalStorage('username', '')
const { width, height } = useWindowSize()
const isDark = useDark()
</script>

Belangrijke Regels

• Naam begint met use (conventie)
• Eén composable per bestand in src/composables/
• Geeft refs terug — en eventueel functies om ze te muteren
• Roep aan in <script setup>, niet binnen een conditie of loop
• Elke aanroep is onafhankelijk — wil je gedeelde state? → Pinia

Veelgemaakte Fouten

// In een gewone JS-functie
function regularFunction() {
  const { count } = useCounter()   // ❌ werkt niet altijd
}

<script setup>
const { count } = useCounter()    // ✅
</script>

export function useCounter() {
  const count = ref(0)
  const increment = () => count.value++
  // ❌ niks ge-returned
}

export function useCounter() {
  const count = ref(0)
  const increment = () => count.value++

  return { count, increment }    // ✅
}