Jump to content
Search Community

Importing plugins in Nuxt

Daniel Hult test
Moderator Tag

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

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

  • 9 months later...
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.
×
×
  • Create New...