Reuse components in Vue

[Liam_hyperisland]

I had to edit the post because I found that the React x GSAP documentation is quite helpful for Vue applications as well.

What I'm trying to recreate is a Vue version of the 'Reusing Components' example found in the React documentation. Can anyone confirm whether my Vue version is equivalent to the React example?

 

Reusing Components (The only difference is that I'm using a timeline and reusing two components)

 

Official React example of Reusing Components

 

Thank you

 

See the Pen RwVBWGW by GreenSock (@GreenSock) on CodePen

[Liam_hyperisland]

I got my about the answer from: https://gsap.com/resources/React/.  It's not really about Vue but I guess the principle and the logic is the same.
 

[Rodrigo]

Hi,

 

Indeed passing the timeline or a method to add to that timeline as a prop is a good approach as long as all the components are direct children of the main one.

 

But if for some reason you have more nested components, then I'd suggest using a Vue Composable for that:

https://vuejs.org/guide/reusability/composables.html

 

Unfortunately I don't have time to create simple demos for both approaches now, but you could check this demo that shows how to use a Composable with GSAP instances:

https://stackblitz.com/edit/vitejs-vite-w8wtpj?file=src%2Fcomposables%2Ftransition-composable.js,src%2Fviews%2FScrollView.vue,src%2Fviews%2FLayersView.vue

 

I'll try to get something done in the next few days in order to provide a working example of using a composable for this. Hopefully this helps for now.

 

Happy Tweening!

[Liam_hyperisland]

10 hours ago, Rodrigo said:

Hi,

 

Indeed passing the timeline or a method to add to that timeline as a prop is a good approach as long as all the components are direct children of the main one.

 

But if for some reason you have more nested components, then I'd suggest using a Vue Composable for that:

https://vuejs.org/guide/reusability/composables.html

 

Unfortunately I don't have time to create simple demos for both approaches now, but you could check this demo that shows how to use a Composable with GSAP instances:

https://stackblitz.com/edit/vitejs-vite-w8wtpj?file=src%2Fcomposables%2Ftransition-composable.js,src%2Fviews%2FScrollView.vue,src%2Fviews%2FLayersView.vue

 

I'll try to get something done in the next few days in order to provide a working example of using a composable for this. Hopefully this helps for now.

 

Happy Tweening!

Thanks again Rodrigo for your great answers.