I'm not using vite-plugin-ssr as Inertia.js already comes with an SSR feature.
I ended up moving my GSAP/ScrollTrigger imports to the main app.js file and injecting them using the Vue provide() function.
import { createSSRApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
gsap.registerPlugin(ScrollTrigger)
createInertiaApp({
setup({ el, App, props, plugin }) {
const app = createSSRApp({ render: () => h(App, props) })
.use(plugin)
.provide('gsap', gsap)
.provide('ScrollTrigger', ScrollTrigger)
app.mount(el)
},
})
In the ssr.js file I only imported GSAP without ScrollTrigger.
import { createSSRApp, h } from 'vue'
import { createInertiaApp, Link, Head } from '@inertiajs/vue3'
import createServer from '@inertiajs/vue3/server'
import { gsap } from 'gsap'
createServer(page =>
createInertiaApp({
setup({ App, props, plugin }) {
return createSSRApp({ render: () => h(App, props) })
.use(plugin)
.provide('gsap', gsap)
},
}),
)
Then everytime I need to use GSAP I just inject it inside my component.
<script setup>
import { inject, nextTick, onMounted } from 'vue'
const gsap = inject('gsap')
onMounted(() => {
nextTick(() => {
gsap.to(...)
})
})
</script>
Whenever I need to use a standalone ScrollTrigger instance I inject it with a default value set to null and check if it exists before using it. This way it works in the browser but it is ignored by the server.
<script setup>
import { inject, nextTick, onMounted } from 'vue'
const gsap = inject('gsap')
const ScrollTrigger = inject('ScrollTrigger', null)
onMounted(() => {
nextTick(() => {
if (ScrollTrigger) {
ScrollTrigger.create(...)
}
})
})
</script>
Again thank you for your time
Cheers!
