nuxt Nuxt Module for GSAP with Premium Plugin Support

[LucaArgentieri]

Hello!

I'm developing a GSAP Nuxt module to simplify GSAP integration in Nuxt applications.

The module offers the following 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.

I would like to also include GSAP's premium plugins in the module, but only for users who have a valid GSAP Club license.

What is the best way to manage the installation of GSAP's premium plugins in a Nuxt module?

 

I greatly appreciate any feedback or suggestions on how to best implement this functionality.

Thank you!

[Rodrigo]

Hi @LucaArgentieri and welcome to the GSAP Forums!

 

The installation process of the premium Plugins is basically the one described in our installation guide:

https://gsap.com/docs/v3/Installation

 

So users of your module should install the bonus Plugins as shown in that URL and perhaps you should offer a config option in order to import and register the bonus plugins the user wants to use in the project so the module can import and register them.

 

Hopefully this helps

Happy Tweening!

[Luca Argentieri]

On 3/21/2025 at 9:57 PM, Rodrigo said:

Hi @LucaArgentieri and welcome to the GSAP Forums!

 

The installation process of the premium Plugins is basically the one described in our installation guide:

https://gsap.com/docs/v3/Installation

 

So users of your module should install the bonus Plugins as shown in that URL and perhaps you should offer a config option in order to import and register the bonus plugins the user wants to use in the project so the module can import and register them.

 

Hopefully this helps

Happy Tweening!

Thank you @Rodrigo

I’m fixing the problem by keeping the classic gsap version installed and downloading the package gsap@npm:@gsap/${role} based on the role specified in nuxt.config.
 

I have two questions: 
- Does the package with the member role have anything different from the classic version of gsap?
- What is the correct way to import gsap club plugins?  (this is the object I use to get the list of plugins and import them only if required in nuxt.config)

const gsapCorePlugins = {
  Draggable: () => import('gsap/Draggable').then(mod => mod.Draggable),
  EaselPlugin: () => import('gsap/EaselPlugin').then(mod => mod.EaselPlugin),
//...
}

//Example: 
const gsapClubPlugins = {
  DrawSVGPlugin: () => import('gsap/DrawSVGPlugin').then(mod => mod.DrawSVGPlugin),
}

Can I use this way? Does the import change for club plugins?

[Rodrigo]

On 3/23/2025 at 3:39 PM, Luca Argentieri said:

Does the package with the member role have anything different from the classic version of gsap?

Just the Club bonus plugins, everything else is the same.

On 3/23/2025 at 3:39 PM, Luca Argentieri said:

What is the correct way to import gsap club plugins?  (this is the object I use to get the list of plugins and import them only if required in nuxt.config)

That seems right to me, you just have to include in your package documentation that this requires users to install the bonus Club Plugins manually using any of the methods indicated in our Installation resources in our Learning Center. Otherwise users will get an error, which will also happen if the user doesn't have a Club GSAP membership or the user's Club tier doesn't include the Plugins being imported, since that will throw an error.

 

Finally, as I mentioned before you should look to import and register the plugins the user indicates, otherwise you would be bloating the file size with plugins that will never be used in the site, which is something you should be able to do without much hassle when using dynamic imports.

 

 

Hopefully this helps

Happy Tweening!