How to use plugins?

[Curs3W4ll]

Hi!

First of all, thanks for the module!
I was wondering, how can I register plugins?

Here is what should be done in pure Javascript:

import { gsap } from "gsap";    
import { RoughEase } from "gsap/EasePack";

gsap.registerPlugin(RoughEase);

What should be done using this module?

[holux-design]

@Curs3W4ll Hey there, good question!

I wonder if this regards only the EasePack or are there other plugins that can possibly be wanted to import?
Currently auto-imported (because part of the featureset) are ScrollTrigger, ScrollToPlugin, Draggable and TextPlugin.

I think that should be all neccessary ones that can be used with this module, without any actual feature development neccessary. (Like gsap flip -> wouldnt make sense to import since its usage isnt supported syntax-wise without actual new feature development)

I honestly cant think of a meaningful way to self-import the plugins via nuxt.config. So I am tempted to go for boolean flags like seen in many other gsap-related nuxt modules.

This could look something like:

export default defineNuxtConfig({
  vgsap: {
    plugins: {
      easePack: true,
      scrollTrigger: false
      etc...
    }
  }
})

By default I would include all of them, but you can disable them via nuxt.config

Edit: Now that I'm thinking about it, disabling e.g. ScrollTrigger wouldnt work since its deeply integrated in the whole plugin code. Same for Draggable and TextPlugin. ScrollToPlugin could theoretically be disabled since its only used in the value object

I think for this particular scenario you brought up, I would just go for including EasePack by default and thats it.

What are your thoughts on this?

[Curs3W4ll]

@holux-design Thanks for the fast response.

I think we have two options:

---

Don't change anything, and add an example in the documentation to register a plugin

I've found a solution to use plugins using the useGSAP() composable. You can manually register any plugin using the GSAP instance, it will work. An example below:

<script setup lang="ts">
// @ts-expect-error The GSAP module seems to not be typescript-compatible yet
import { RoughEase } from "gsap/EasePack";

onMounted(() => {
  useGSAP().registerPlugin(RoughEase);
});
</script>

This solution have 2 issues:

1. I don't know if it registers plugins multiple times. Let's say you're using this plugin in 2 different components, you will have to call registerPlugin() function twice, if the two components are used at the same time, it will lead to call the registerPlugin() function twice, which may be a problem.
2. The GSAP module does not seems to handle typescript very well, so it will add a ts error saying it cannot find any declaration file for the module, at least for me it did (it's why I've added the @ts-expect-error comment).

---

Opting for boolean flags

This solution would work well, but I would not include all plugins by default, as this may increase the bundle size for no reason.

[holux-design]

Ok Solution 1 just astouned me 👏

I wasn't aware that it could work that way but I love it. So I'd just go with the docs solution.
Regarding your concern N° 1: I will modify the structure of the composable a bit, so that it doesnt provide a separate gsap instance, but rather just return the actual used one from the plugin. This way, when you register a plugin with useGsap() it would from then on be available on all occurences.

I just tested it with two nested components, where only the parent would register RoughEase and it was indeed available in the child without registering. (Doesn't even need to be a child, just a subsequently mounted component).

So as a best practice for the docs I will suggest registering plugins just in a as-high-as-neccessary component, preferably app.vue, or a layout file.

Sidenote: The ts error didnt show for me when importing EasePack. Dont know why - probably some vscode config or whatever.

[holux-design]

resolves with PR #10 and goes live in Version 1.3.3

[holux-design]

I've added the instructions in the docs here: https://v-gsap-nuxt.vercel.app/information/gsap-plugins

@Curs3W4ll If you feel like there is information missing on the docs page, please let me know.

Otherwise: Thanks for bringing up this topic and for your great idea and testing ☺️

[Curs3W4ll]

Cool, thanks for your work!