nuxt3のplugins とcomposablesの違い（目的、使い分け）

Plugins

目的

プラグインは、Nuxtアプリケーションの初期化時に特定のロジックを実行するために使用されます。これにより、アプリケーション全体で使用される機能やライブラリをセットアップしたり、Vueの拡張を行ったりすることができます。

使用例

サードパーティのライブラリの初期化
カスタムディレクティブやミックスインの登録
Vueインスタンスやコンポーネントのプロパティの拡張

特徴

プラグインはアプリケーションの起動時に一度だけ実行されます。
defineNuxtPluginを使用して作成されます。
プラグインはアプリケーション全体で利用可能なグローバルな機能を提供します。
例
plugins/my-plugin.jsを作成してプラグインを定義します。

// plugins/my-plugin.js
export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.provide('myProperty', 'This is my custom property')
  nuxtApp.provide('myMethod', () => {
    console.log('This is my custom method')
  })
})

nuxt.config.jsでプラグインを登録します。

// nuxt.config.js
export default defineNuxtConfig({
  plugins: [
    '~/plugins/my-plugin.js'
  ]
})

使用例：

<script setup>
import { useNuxtApp } from '#app'

const { $myProperty, $myMethod } = useNuxtApp()
console.log($myProperty)  // Output: "This is my custom property"
$myMethod()  // Output: "This is my custom method"
</script>

Composables

目的

Composablesは、Vue 3のComposition APIを利用して、再利用可能な状態やロジックを作成するために使用されます。これにより、コンポーネント間でコードを共有しやすくなります。

使用例

フォームのバリデーションロジック
データフェッチングロジック
共通の状態管理

特徴

Composablesは必要に応じて何度でも呼び出すことができます。
useというプレフィックスを使った命名が一般的です（例：useAuth、useFetchData）。
主にコンポーネント内での再利用を目的としています。
例
composables/useFetchData.jsを作成してデータフェッチングロジックを定義します。

// composables/useFetchData.js
import { ref } from 'vue'
import { useNuxtApp } from '#app'

export default function useFetchData(url) {
  const data = ref(null)
  const error = ref(null)
  const loading = ref(true)

  const { $axios } = useNuxtApp()

  async function fetchData() {
    loading.value = true
    try {
      const response = await $axios.get(url)
      data.value = response.data
    } catch (err) {
      error.value = err
    } finally {
      loading.value = false
    }
  }

  fetchData()

  return {
    data,
    error,
    loading
  }
}

使用例：

<script setup>
import useFetchData from '~/composables/useFetchData'

const { data, error, loading } = useFetchData('/api/data')
</script>

<template>
  <div v-if="loading">Loading...</div>
  <div v-else-if="error">{{ error.message }}</div>
  <div v-else>{{ data }}</div>
</template>

まとめ

Plugins: アプリケーションの初期化時に実行されるコードを定義し、サードパーティライブラリの設定やグローバルな機能を提供します。アプリケーション全体で一度だけ実行されます。
Composables: Vue 3のComposition APIを利用して、再利用可能な状態やロジックを作成します。特定のコンポーネントや機能に関連するコードを再利用するために使用され、必要に応じて何度でも呼び出すことができます。
これらの違いを理解し、適切な場面で使い分けることで、Nuxt 3アプリケーションの開発効率を高めることができます。