Jump to content
GreenSock

SJH

Calling gsap within a method of a mixin in Nuxt not working

Go to solution Solved by SJH,

Recommended Posts

If I drop a gsap call into this method (which is in a mixin for Nuxt), I get the message "gsap is not defined". As soon as I remove gsap, I don't have any problems and the code executes without a hitch. I would post a minimum demo but I'm using Nuxt AND a mixin, so I don't think it's something I can replicate on codepen.io.

Thanks for the help.

export const getColorMethod = {
    methods: {
        getColor() {
          console.log("getColor IN MIXIN is called");
            gsap.to(".gsapTest", { x: 100 });
            
            if (this.getColorCalled == false) {
                for (let i = 0; i < this.pathIDs.length; i++) {
                    let pathID = this.pathIDs[i];
                    let theItem = this.$el.getElementById(pathID);
                    if (theItem.hasAttribute("style")) {
                        theItem.removeAttribute("style");
                    }
                }
                this.getColorCalled = true;
            }
            return this.$store.getters.getCurrentColor;
        },
    }
};

In the main file that calls the mixin, I have gsap imported as well as the mixin:

import { gsap } from "gsap";
import { getColorMethod } from "~/mixins/getColorMethod.js";

...

,
  mixins: [
    getColorMethod,
  ],
Link to comment
Share on other sites

You can use codesanbox for Nuxt. And it's not clear from your code, but you need to import gsap into every file that directly references it, so that would mean your mixin.

 

Here's a Nuxt starter template...

https://codesandbox.io/s/gsap-nuxt-starter-r5lkg

 

Link to comment
Share on other sites

I don't see that file, so I'm not sure what I'm supposed to be looking at, but if you are trying to use gsap inside a mixin, you need to import it. Every single file that uses gsap must import it as imports are not global. You should have seen an error for it.

 

image.png

 

import { gsap } from "gsap";

export const getColorMethod = {
    methods: {
        getColor() {
          console.log("getColor IN MIXIN is called");
            gsap.to(".gsapTest", { x: 100 });
            
            if (this.getColorCalled == false) {
                for (let i = 0; i < this.pathIDs.length; i++) {
                    let pathID = this.pathIDs[i];
                    let theItem = this.$el.getElementById(pathID);
                    if (theItem.hasAttribute("style")) {
                        theItem.removeAttribute("style");
                    }
                }
                this.getColorCalled = true;
            }
            return this.$store.getters.getCurrentColor;
        },
    }
};

 

Link to comment
Share on other sites

Thanks Blake, just made that link public. Hopefully you can see it now. In the meantime, trying to implement your suggestion.

Link to comment
Share on other sites

  • Solution

Thanks for pointing me in the right direction, Blake. So after a little research, and a point in the right direction from this GSAP thread (Import gsap to Vue project), I decided to go with a enabling GSAP everywhere by making it a global mixin in Nuxt.

 

(Though if you didn't want to go the global mixin route, Blake's import at the top of the mixin, would work too. I may end up using that instead of the global mixin if I run into any problems, but right now the global version seems to be working for me.)

 

You can view the entire (on-going) project here on codesandbox.io.

Essentially how you do it is to create a "gsap.js" file in the plugins folder of the Nuxt project, and then add the following lines to the 'nuxt.config.js' file:

plugins: [
'~/plugins/gsap.js'
],

 

The contents of the gsap.js file are as follows (again view it all on codesandbox.io, here).

import Vue from "vue";
import gsap from "gsap";
import random from "gsap/all";
import DrawSVGPlugin from "gsap/DrawSVGPlugin";
import MorphSVGPlugin from "gsap/MorphSVGPlugin";

import RoughEase from "gsap/EasePack";

// Make sure to pick a unique name for the flag
// so it won't conflict with any other mixin.
if (!Vue.__global_mixin__) {
Vue.__global_mixin__ = true
Vue.mixin({
created: function () {
this.gsap = gsap;
this.DrawSVGPlugin = DrawSVGPlugin;
this.MorphSVGPlugin = MorphSVGPlugin;
this.RoughEase = RoughEase;
if (process.client) {
this.gsap.registerPlugin(this.DrawSVGPlugin);
this.gsap.registerPlugin(this.MorphSVGPlugin);
this.gsap.registerPlugin(this.RoughEase);
}
this.random = random;
}
})
}

I should mention that because this is a global mixin in the created hook, that means every object you create that has the created hook, will have this code. One great thing IMO about this is that you no longer need to have an import gsap line in any of your components, mixins, etc.  However, a trade-off for that is that instead of just using 'gsap' you now have to use 'this.gsap'.

 

Here's an example snippet of code in one of the mixins:

this.gsap.to(pathID, {
	duration: 0.5,
	fill: this.defaultColors[i],
});

Please have a look at this project, especially if you want to know more about working with SVGs in Nuxt. If you have any feedback or suggestions, I would really welcome any improvements you might think of.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×