Dev.to

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'], }) const elementRef = ref(null) onMounted(() => { gsap.to(elementRef.value, { x: 100 }) }) GSAP me! Dynamically Register Plugins export default defineNuxtConfig({ modules: ["gsap-nuxt-module"], gsap: { plugins: ["Draggable"], }, }); Use provided Composables const Draggable = useDraggable() const elementRef = ref(null) onMounted(() => { Draggable.create(elementRef.value) }) Drag me! 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/

Mar 17, 2025 - 22:27
 0
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>
   ref="elementRef">GSAP me!
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>
   ref="elementRef">Drag me!
template>