gsap-nuxt-module

Enhance your Nuxt application with powerful animations and transitions using GSAP!

• ✨  Release Notes
• 🏀 Online playground
• 📖 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

1. Install the module to your Nuxt application with one command:

 npm i gsap-nuxt-module

2. Add gsap-nuxt-module to the modules section of nuxt.config.ts

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

3. 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

1. In your nuxt.config.ts, enable the desired GSAP plugins:

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

2. 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