Getting Started
Installation
Add gsap-nuxt-module to your Nuxt project in one step.
Quick setup
Install the package:
npm i gsap-nuxt-module
pnpm add gsap-nuxt-module
bun add gsap-nuxt-module
Add the module to your nuxt.config.ts:
nuxt.config.ts
export default defineNuxtConfig({
modules: ['gsap-nuxt-module'],
})
That's it. GSAP is now available everywhere in your app — no imports needed.
Basic usage
gsap is auto-imported, so you can use it directly in any component or composable — no import statement needed.
components/MyComponent.vue
<script setup lang="ts">
const boxRef = ref<HTMLElement | null>(null)
onMounted(() => {
gsap.from(boxRef.value, {
opacity: 0,
y: 40,
duration: 0.6,
ease: 'power2.out',
})
})
</script>
<template>
<div ref="boxRef" class="box">Hello GSAP!</div>
</template>
For timelines and more advanced usage, use the useGsap() composable.
GSAP runs client-side only. The module registers its plugin with
mode: 'client', so all GSAP calls are safely skipped during SSR.