feat: add custom composables

[ivodolenc]

Type of Change

• [x] New feature
• [x] Documentation

Request Description

Adds custom composables.

Provide

• Type: boolean
• Default: true

Provides the main $gsap core with plugins globally.

// nuxt.config.ts

{
  gsap: {
    provide: true
  }
}

Available globally

const { $gsap } = useNuxtApp()

$gsap.to('.class', { rotation: 3, x: 100, duration: 1 })

Composables

• Type: boolean
• Default: undefined

Specifies custom composables.

If enabled, allows the use of custom composables.

// nuxt.config.ts

{
  gsap: {
    composables: true
  }
}

When using only composables, it is recommended to disable global import.

// nuxt.config.ts

{
  gsap: {
    composables: true
    provide: false // global import
  }
}

useGsap

Provides the main gsap core as custom composable.

It is automatically enabled with the composables: true option.

<template>
  <h1 class="title">Nuxt Gsap Module</h1>
</template>

<script setup lang="ts">
  useGsap.to('.title', { rotation: 3, x: 100, duration: 1 })
</script>

// Explicit import (optional)
import { useGsap } from '#gsap'

Auto Import

• Type: boolean
• Default: true

Specifies the auto-import feature.

If enabled, the composables will be available globally so there is no need to import them manually.

Since this is an opinionated feature, you can disable global auto-import and use explicit import only where you need it.

[!NOTE]\ Works only if the option composables: true is enabled.

// nuxt.config.ts

{
  gsap: {
    autoImport: false
  }
}