How to add js file in a specific page from a library installed by npm in laravel?

Viewed 26

I want to use gsap library on a specific page. I install it by npm i gsap and include the library in the resources/app.js file. here I can use gsap parameters and anything is ok, but it is through all apps and I want to use gsap just in a specific page, here is my procedure but I get some error. how should I fix it?

this is the code in resources folder/ app.js file

import './bootstrap';
import {gsap} from "gsap";
gsap.to('.about', {x: 200})

but I just want to use in about.blade.php page.

the @stack in layouts view, app file

    <head>
...
@vite(['resources/css/app.css', 'resources/js/app.js'])
   </head>
    <body>
...
    @stack('js')
    </body>

and the about page

<x-app-layout>

<div class="about w-full w-32 h-32 bg-red-500"></div>
    @push('js')
<script>
gsap.to('.about', {x: 200})
</script>
    @endpush

</x-app-layout>

and I got the error gsap is not defined!!!

0 Answers
Related