SJH Posted December 14, 2021 Share Posted December 14, 2021 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 More sharing options...
OSUblake Posted December 14, 2021 Share Posted December 14, 2021 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 More sharing options...
SJH Posted December 14, 2021 Author Share Posted December 14, 2021 Thanks Blake, Here's the mixin in question running on codesandbox.io. I'm implementing the mixins on the googleanalyticsSVG.vue file. Once I have it ready to go, I can apply my mixins to the other cards. https://codesandbox.io/s/gsap-cards-fmxr7?file=/mixins/getColorMethod.js Link to comment Share on other sites More sharing options...
OSUblake Posted December 14, 2021 Share Posted December 14, 2021 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. 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 More sharing options...
SJH Posted December 14, 2021 Author Share Posted December 14, 2021 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 More sharing options...
Solution SJH Posted December 17, 2021 Author Solution Share Posted December 17, 2021 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now