problem with using axios in laravel project

I'm using axios to make a live laravel project and get this error: Uncaught ReferenceError: axios is not defined.

I imported app.js in my view component like this:

<script src="{{ asset('js/app.js') }}"></script>

<script>
(function() {
    const options = document.querySelectorAll('.quantity')

    Array.from(options).forEach(function(element) {
        element.addEventListener('change', function() {
            const id = element.getAttribute('data-id')

            axios.patch(`/cart/${id}`, {
                quantity: this.value
            })
            .then(function (response) {
                console.log(response);
            })
            .catch(function (error) {
                console.log(error);
            });
        })
    });
})();

I believe the first script tag is causing the issue because I get this error in the console:

GET http://127.0.0.1:8000/js/app.js net::ERR_ABORTED 404 (Not Found)

However, I don't know how to link to app.js file properly.

The issue was solved after I ran

npm install
npm install vite
npm run dev

and added this line to my view file up in the head tag:

@vite(['resources/css/app.css', 'resources/js/app.js'])