gsap-nuxt-module
Enhance your Nuxt application with powerful animations and transitions using GSAP!
Features
- Auto-import GSAP: Easily integrate GSAP without manually importing it in every file.
- Dynamic Plugin Registration: Import and register GSAP plugins only if enabled in
nuxt.config.ts, optimizing performance.
- Composable for Each Plugin: Use GSAP plugins as composables for a simple and direct experience.
Quick Setup
- Install the module to your Nuxt application with one command:
npm i gsap-nuxt-module
- Add gsap-nuxt-module to the modules section of nuxt.config.ts
export default defineNuxtConfig({
modules: ['gsap-nuxt-module'],
})
- Here's how to use GSAP in your component:
<script setup>
const elementRef = ref(null)
onMounted(() => {
gsap.to(elementRef.value, {
x: 100
})
})
</script>
<template>
<div ref="elementRef">GSAP me!</div>
</template>
Example Configuration
- In your nuxt.config.ts, enable the desired GSAP plugins:
export default defineNuxtConfig({
modules: ["gsap-nuxt-module"],
gsap: {
plugins: ["Draggable"],
},
});
- Here's how to use the Draggable plugin in your component:
<script setup>
const Draggable = useDraggable()
const elementRef = ref(null)
onMounted(() => {
Draggable.create(elementRef.value)
})
</script>
<template>
<div ref="elementRef">Drag me!</div>
</template>
You can find more examples in playground
That's it! You can now use gsap-nuxt-module in your Nuxt app ✨
Contribution
Local development
# Install dependencies
npm install
# Generate type stubs
npm run dev:prepare
# Develop with the playground
npm run dev
# Build the playground
npm run dev:build
# Run ESLint
npm run lint
# Run Vitest
npm run test
npm run test:watch
# Release new version
npm run release
