Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Daniel Hult

Importing plugins in Nuxt

Recommended Posts

Hi guys,

Im trying to import the MorphSVG plugin in a Nuxt project. I've seen some threads here that there has been some confusion about how to import them and I just want to know what you guys recommend.


In the image below I've imported gsap as usual and put the morphSVG plugin and the registration inside an if to not run on the server. Inside the mounted hook Im trying to console log the morphSVG plugin, but get an error in the console (2nd image).


Anybody know what Im doing wrong? :) 


1434380688_nuxtimport.png.2a3c383aaed9970c10591276d87b4844.pngconsole.thumb.png.5fac143a61b3ef7cb2efdd0159754dd2.png

Link to comment
Share on other sites

Hey Daniel.

 

That error message makes it seem like you're trying to load the modules version of GSAP but your system doesn't seem to work with modules. We recommend that you use the UMD version instead. If you want to use the require syntax you can do so like so:

const { gsap } = require("gsap/dist/gsap");
const { MorphSVGPlugin } = require("gsap/dist/MorphSVGPlugin");

gsap.registerPlugin(MorphSVGPlugin);

 

Our install helper is incredibly handy for learning the right syntax :) 

Link to comment
Share on other sites

That doesn't seem to fix the problem unfortunately

Link to comment
Share on other sites

Also this returned undefined. I had to remove the .default at the end.
 

const { gsap } = require("gsap/dist/gsap").default;
Link to comment
Share on other sites

Can you send a minimal ZIP of your project? I'll test some things locally. CodePen or something would also be fine.

Link to comment
Share on other sites

 

Please read this thread. It's much easier if you tell nuxt to transpile gsap.

 

 

You're didn't install it.

 

image.png.3f3fc15c9c2d798383b057984eb2e01b.png

 

Please watch this video.

 

 

 

@ZachSaucier

 

You forgot to remove the .default part when you added the brackets. It should just be.

const { gsap } = require("gsap/dist/gsap");

 

  • Like 2
Link to comment
Share on other sites

Just now, Daniel Hult said:

I will try and watch the video and see if that helps first! Thanks @OSUblake :) 

 

And also go through that thread I linked to. 

 

 

 

  • Like 1
Link to comment
Share on other sites

5 minutes ago, OSUblake said:

You forgot to remove the .default part when you added the brackets. 

Sorry, I wasn't aware that I needed to. I'll get that fixed today. Working on another piece of the installation page at the moment.

  • Like 1
Link to comment
Share on other sites

Very helpful @OSUblake - this solved the issue I was having. I wasn't aware of the gsap-bonus.tgz file that I can add to install them with NPM/Yarn.

So the final code after following the video above was:

 

import { gsap } from 'gsap';
import { MorphSVGPlugin } from 'gsap/MorphSVGPlugin';

if (process.client) {
    gsap.registerPlugin(MorphSVGPlugin);
}

 

  • Like 3
Link to comment
Share on other sites

11 minutes ago, ZachSaucier said:

Working on another piece of the installation page at the moment.

 

You might want add to the install page about how to get nuxt SSR working by letting it transpile gsap, and using process.client.

  • Like 1
Link to comment
Share on other sites

Sorry, actually there must've been a hiccup here. I get an syntax error when Im trying to import the MorphSVGPlugin. Have you seen this error before?

syntaxerror.thumb.png.3237cfad9f3493c5f251cd397733a6bd.png

Link to comment
Share on other sites

Okay, I see you had to put this inside the build settings in nuxt.config:

Now it works! Sorry again :D 

 

    build: {
        /*
         ** You can extend webpack config here
         */
        extend() {},
        transpile: ['gsap'],
    },

 

  • Like 2
Link to comment
Share on other sites

Yes. That's the key!!!

  • Like 1
Link to comment
Share on other sites

  • 9 months later...

Hi,

 

Maybe something else is happening in my case since i am using what mentioned above and still get "gsap not defined".

 

Feel free to check code blocks below. I dont understand why this is not working. I am on latest Nuxt version (2.14). Thanks!

 

plugin.thumb.png.6dbf33fec4a6922ff25db373429bc21c.png

 

config.thumb.png.ec42658c93394f7e96e8d48875d14b86.png

 

usingit.png.fb560bada25b35a8586f92aa3e469716.png

 

 

error.thumb.png.312a3a1d1bbfb546ea08ff838cab704a.png

 

 

 

Link to comment
Share on other sites

@Christos Tsangaris I'm not a Nuxt guy, but shouldn't the plugins that you're loading in your config.js file actually be the GSAP files? Not some file where you're importing GSAP? The imports and registering of the plugins usually go in the files where you want to use GSAP and the plugins.

Link to comment
Share on other sites

4 minutes ago, ZachSaucier said:

@Christos Tsangaris I'm not a Nuxt guy, but shouldn't the plugins that you're loading in your config.js file actually be the GSAP files? Not some file where you're importing GSAP? The imports and registering of the plugins usually go in the files where you want to use GSAP and the plugins.

Hi @ZachSaucier, thanks for the reply!

 

Actually you import everything you need in a plugin (first image) and then you use this plugin inside the config.js file of Nuxt. This way its cleaner.

Link to comment
Share on other sites

I have zero experience with Nuxt, so I can't help much here but why do you have the trailing "/" in your gsap import? 

import { gsap } from "gsap/"; // <- weird

import { gsap } from "gsap"; // correct

You could also try importing the UMD version if your build system needs that - it's in the /dist directory, so you'd import from "gsap/dist/gsap", for example. 

  • Like 1
Link to comment
Share on other sites

@GreenSock the “/“ part was a typo while transferring the code to the post.

 

Btw, i have used the UDM approach and had the same issues. Right now i am importing the library in each component i want to use it..

 

Your documentation really shines, but it would be great to have a section where you guide people using your library in different well known JS frameworks (VueCLI, NuxtJS, NextJS, etc.)

  • Like 1
Link to comment
Share on other sites

This is how I used plugins in nuxt to include Splitting.js in one of my projects. Should be the same for gsap.

Try to change this code to relevant gsap code and you should be fine.

/plugins/splitting.js
 

let Splitting;
if (process.client) {
    require('splitting/dist/splitting.css');
    require('splitting/dist/splitting-cells.css');
    Splitting = require('splitting');
}
export default Splitting;

 

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.
×