A new GSAP Nuxt Module

Are you tired of importing GSAP into every file?
Are you tired of register every single plugin?
You can’t wait to create your own animation, right?
NOW YOU FINALLY CAN!

With the new GSAP Nuxt Module you can:

• Auto-import GSAP

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

<script setup>
const elementRef = ref(null)

onMounted(() => {
  gsap.to(elementRef.value, {
    x: 100
  })
})
</script>

<template>
  <div ref="elementRef">GSAP me!</div>
</template>

• Dynamically Register Plugins

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

• Use provided Composables

<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 here and test it in the playground.

Why?

GSAP is a library that I use daily with Nuxt, I wanted to create a module that was in the first place comfortable for me, hoping it can be useful for many others.

I wanted to make the installation and use of GSAP as simple and clean as possible, favoring the maximum developer experience.

What's next?

I have some new features to implement, for example I would like to integrate the plugins for GSAP Club members.

Can I contribute?

Sure, the plugin is open source and available to anyone who wants to contribute to the wonderful Nuxt and GSAP communities.

Thanks and feedback

Thank you for reading this article and I invite you to ask me questions, create issues on github, propose a feature and contribute to the module.

Ah and if you want to click the star! ⭐

Repo: https://github.com/LucaArgentieri/gsap-nuxt-module
NPM: https://www.npmjs.com/package/gsap-nuxt-module
Nuxt: https://nuxt.com/
GSAP: https://gsap.com/