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

Share this post


Link to post
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 :) 

Share this post


Link to post
Share on other sites

That doesn't seem to fix the problem unfortunately

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Sure! Where do I send it to?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Yes. That's the key!!!

  • Like 1

Share this post


Link to post
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.

×