Vue（Nuxt）における composables（コンポーザブル）

composable とは

• Vue の Composition API の考え方に基づいた、Vue に依存する再利用可能なロジックを関数として切り出したもの
• Vue コンポーネント内の状態管理や副作用処理を外に分離して、他のコンポーネントでも再利用しやすくする

// useCounter.ts
export function useCounter() {
  const count = ref(0)
  function increment() {
    count.value = (count.value * 3) / 2
  }
  return { count, increment }
}

// index.vue
<script setup lang="ts">
const { count, increment } = useCounter()
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increase</button>
  </div>
</template>

composable の条件

下記のうち、一つでも当てはまっていたらその関数はComposableに該当する

1. 関数内で、他のComposableを使用している
2. 関数内で、Lifecycle Hookを使用している（onMounted等）
3. 関数内で、リアクティブなロジックを使用している（ref, computed, watch等）

composable の使用規則

Composableは必ずリアクティブなコンテキスト内で実行する

• <script setup>内のTop LevelでComposableを直接呼び出すのはOK
• 通常の関数や非同期関数の中でComposableを直接呼び出すのはNG
  • リアクティブシステムが適切に追跡できないため

composables と utils の違い

項目	composables	utils
目的	Vue に依存するロジックを再利用する	どこでも使える純粋な関数
Vue API	✅ 使う（ref, watch, onMounted など）	❌ 使わない
状態	✅ 持つことが多い（リアクティブ）	❌ 持たない（ただの計算など）
命名規則	useXxx（Composition APIに沿った命名）	自由（formatXxx, getXxx など）

参考にしたURL

https://ja.vuejs.org/guide/reusability/composables
https://michaelnthiessen.com/13-vue-composables-tips
https://www.youtube.com/watch?v=N0QrFKBZuqA
https://www.youtube.com/watch?v=njsGVmcWviY