How to combine GSAP and Nuxt3 #

This started from my personal portfolio and person asked how I implemented GSAP into Nuxt3, and now I am writing a blog post on it :)

You can checkout main discussion answer at github

Transpiling gsap #

So we will assume that you have working nuxt3 website and installed gsap (latest version recommended). First of all you need tell nuxt to transpile gsap so you can import it without getting some errors. Nuxt3 has compatible with Nuxt2 configuration, so we will just add this:

 1// ~/nuxt.config.js
 2
 3// you can omit this line in nuxt3 rc.10+
 4import { defineNuxtConfig } from 'nuxt'
 5
 6export default defineNuxtConfig({
 7  // ...some configuration
 8  
 9  build: {
10    transpile: ['gsap'],
11  },
12
13  // ...even more configuration
14})

into our nuxt.config.[js|ts]

Registering GSAP and its plugins in Nuxt #

We need to import gsap and register plugins as soon as possible, before every component or page, in order to correctly use it. I found a pretty straightforward solution - use Nuxt plugins. To do so we will create with a file with name gsap.js (example) in plugins directory (you may need to create it). This file will do be executed on server as well as on client side and it is totally ok, cuz we are transpiling gsap.

 1// ~/plugins/gsap.js
 2
 3import { gsap } from 'gsap'
 4import { ScrollTrigger } from 'gsap/ScrollTrigger'
 5import { ScrollToPlugin } from 'gsap/ScrollToPlugin'
 6
 7// nuxt will auto import defineNuxtPlugin, so our file will look clean
 8export default defineNuxtPlugin(() => {
 9  // imported gsap and all plugins needed, then just register them
10  gsap.registerPlugin(ScrollToPlugin, ScrollTrigger)
11
12  // later you can use them by deconstructing useNuxtApp composable
13  // but everything you put in provide will be prefixed with `$` symbol to 
14  // prevent some collisions
15  return { provide: { gsap, ScrollToPlugin, ScrollTrigger } }
16})

Using in components or pages #

At this point gsap is imported, plugins are registered, so you can use it as is. But to make code more readable and elegant, we will create the gsap composable that will be auto imported in every vue component. Touch a new file use-gsap.js in composables directory, and put some similar code to this:

 1// ~/composables/use-gsap.js
 2
 3export default () => {
 4  // auto imported by nuxt
 5  const nuxtApp = useNuxtApp();
 6
 7  return {
 8    // this coming from gsap plugin, which will be also auto registered
 9    gsap: nuxtApp.$gsap,
10    ScrollTrigger: nuxtApp.$ScrollTrigger,
11    ScrollToPlugin: nuxtApp.$ScrollToPlugin,
12  };
13};

And then in every page or component you can do:

 1<script setup>
 2// name of composable is the file name, just remove `-` and camelCase it
 3const { gsap, ScrollTrigger, ScrollToPlugin } = useGsap()
 4
 5// or, if you omitted creation of your own composable you still
 6// can use gsap and everything else through useNuxtApp
 7const { $gsap, $ScrollTrigger, $ScrollToPlugin } = useNuxtApp()
 8
 9const box = ref(null)
10
11onMounted(() => {
12  gsap.from(box.value, { y: -100, opacity: 0, ease: 'expo.out', duration: 1 })
13})
14</script>
15
16<template>
17  <div class="container">
18    <div ref="box" class="container__box">i am a box</div>
19  </div>
20</template>

Hope it helps and see you in next posts 🖐