Composables

Plugins reference

All available composables and their corresponding nuxt.config.ts keys.

How plugin composables work

Each composable (useScrollTrigger(), useDraggable(), etc.) is an auto-imported accessor to the corresponding GSAP plugin instance. You must enable the plugin in nuxt.config.ts — if it's not enabled, the composable throws a clear error. When used inside the useGsap() context form, all plugin instances created in the setup function are automatically reverted on cleanup. For plugin-specific behavior (options, methods, examples), refer to the GSAP documentation links below.

Available composables

Enable any plugin by adding its key to the plugins array in nuxt.config.ts. The composable is then auto-imported everywhere.

Composable	Plugin	`nuxt.config.ts` key	Docs
`useGsap()`	GSAP core	— (always available)	GSAP
`useScrollTrigger()`	ScrollTrigger	`ScrollTrigger`	ScrollTrigger
`useScrollSmoother()`	ScrollSmoother	`ScrollSmoother`	ScrollSmoother
`useSplitText()`	SplitText	`SplitText`	SplitText
`useMotionPathHelper()`	MotionPathHelper	`MotionPathHelper`	MotionPathHelper
`useDraggable()`	Draggable	`Draggable`	Draggable
`useFlip()`	Flip	`Flip`	Flip
`useObserver()`	Observer	`Observer`	Observer
`useGSDevTools()`	GSDevTools	`GSDevTools`	GSDevTools
`useCustomEase()`	CustomEase	`CustomEase`	CustomEase
`useCustomWiggle()`	CustomWiggle	`CustomWiggle`	CustomWiggle
`useCustomBounce()`	CustomBounce	`CustomBounce`	CustomBounce

Enabling multiple plugins

nuxt.config.ts

export default defineNuxtConfig({
  gsap: {
    plugins: [
      'ScrollTrigger',
      'ScrollSmoother',
      'Draggable',
      'Flip',
      'SplitText',
      'Observer',
      'CustomEase',
    ],
  },
})

Dependencies

ScrollSmoother requires ScrollTrigger to also be listed in plugins. Both must be enabled if you want to use ScrollSmoother.

Playground examples

Live examples for each plugin are available in the playground:

draggable.vue — Draggable with cleanup
scroll-trigger.vue — ScrollTrigger with pinning
split-text.vue — SplitText character/word animation
scroll-smoother.vue — ScrollSmoother + ScrollTrigger
flip.vue — Flip layout transitions
observer.vue — Observer swipe detection

Edit this pageorReport an issue

useGsap()

Access the GSAP instance or create a scoped animation context with automatic cleanup.