How to load js in laravel vuejs 3

Question

I'm new to Laravel and VueJS, and I want to include JavaScript files in my project. Can someone please tell me how to do that? I watched a video on YouTube and got a solution, but sometimes it's not working and it's not good practice to load JavaScript files like this. Please suggest any other options.

      var src = [
            import.meta.env.VITE_APP_URL +'/assets/frontend/vendor/jquery/jquery-3.2.1.min.js',
            import.meta.env.VITE_APP_URL + '/assets/frontend/vendor/animsition/js/animsition.min.js',
            import.meta.env.VITE_APP_URL + '/assets/frontend/vendor/bootstrap/js/popper.js',
            import.meta.env.VITE_APP_URL + '/assets/frontend/vendor/bootstrap/js/bootstrap.min.js',
            import.meta.env.VITE_APP_URL + '/assets/frontend/vendor/select2/select2.min.js',
            import.meta.env.VITE_APP_URL + '/assets/frontend/vendor/daterangepicker/moment.min.js',
            import.meta.env.VITE_APP_URL + '/assets/frontend/vendor/daterangepicker/daterangepicker.js',
            import.meta.env.VITE_APP_URL + '/assets/frontend/vendor/slick/slick.min.js',
            import.meta.env.VITE_APP_URL + '/assets/frontend/slick-custom.js',
            import.meta.env.VITE_APP_URL + '/assets/frontend/vendor/parallax100/parallax100.js',
            import.meta.env.VITE_APP_URL + '/assets/frontend/vendor/MagnificPopup/jquery.magnific-popup.min.js',
            import.meta.env.VITE_APP_URL + '/assets/frontend/vendor/isotope/isotope.pkgd.min.js',
            import.meta.env.VITE_APP_URL + '/assets/frontend/vendor/sweetalert/sweetalert.min.js',
            import.meta.env.VITE_APP_URL + '/assets/frontend/vendor/perfect-scrollbar/perfect-scrollbar.min.js',
            import.meta.env.VITE_APP_URL + '/assets/frontend/main.js'];

        for (var i = 0; i < src.length; i++) {
            const script = document.createElement('script')
            script.src = src[i];
            script.async = false;
            document.getElementById('scripts').appendChild(script);
        }
    }

if i'm using vite to load js file then i'm getting error like "TypeError: Cannot set properties of undefined (setting 'Popper')" — Ricky
– Ricky, Commented Jun 28, 2024 at 7:29
You are then not importing Popper properly, check their documentation. I would also recommend skipping Bootstrap and any other jQuery-based code in 2024. — kissu
– kissu, Commented Jun 28, 2024 at 8:15

Sarah Alkibsi · Accepted Answer · 2024-06-29 09:09:22Z

0

If you wanna use Vuejs components within blade files of Laravel, this article might help you: https://f24aalam.medium.com/integrating-vue-js-components-in-laravel-a-beginners-guide-cf8414a27d6b

edited Jun 29, 2024 at 9:09

answered Jun 29, 2024 at 9:08

Sarah Alkibsi

11 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to load js in laravel vuejs 3

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related