Configuration

Module options

Configure the module under the gsap key in nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['gsap-nuxt-module'],
  gsap: {
    plugins: ['ScrollTrigger', 'Draggable'],
  },
})

plugins

• Type: string[]
• Default: []

List of GSAP plugin names to enable. Each name must match the official GSAP export exactly (Pascal-case). Only listed plugins are dynamically imported — zero bundle overhead for unused ones.

gsap: {
  plugins: [
    'ScrollTrigger',
    'ScrollSmoother',
    'Draggable',
    'Flip',
    'SplitText',
    'Observer',
    'CustomEase',
    // ... see plugins reference for the full list
  ],
},

Using a plugin in a component

After enabling a plugin, use its composable directly:

<script setup lang="ts">
const Draggable = useDraggable()
const boxRef = ref<HTMLElement | null>(null)

onMounted(() => {
  if (!boxRef.value) return
  Draggable.create(boxRef.value, { type: 'x,y' })
})
</script>

<template>
  <div ref="boxRef">Drag me!</div>
</template>

Plugin loading

Plugins are registered once at app startup — you never call gsap.registerPlugin yourself. Disable a plugin by removing it from the list; it will be excluded from the bundle entirely.

// Only ScrollTrigger and Draggable are bundled.
// Flip, SplitText, etc. are NOT included.
export default defineNuxtConfig({
  gsap: {
    plugins: ['ScrollTrigger', 'Draggable'],
  },
})