Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

SigalZ's avatar

How to add scripts files to app.js

Hello,

Working with laravel 10 I use the adminlte template.

I don't 100% understand vite and I never used to import files in js so I need some help here please.

If I want to use script files from resources/adminlte/plugins, for example I need to use this file: resources/adminlte/plugins/jquery/jquery.min.js

Should I just include it with a script tag on my blade?

or

Should I add it to vite.js?

Is there a way I can add all the scripts files I need into: app.js and just call app.js in vite?

I'm really not sure what is the best way to go and how.

0 likes
9 replies
MirkoTdi's avatar

Hi, i have an application whit alpineJS, and i import all of my npm package in App.js like import package-name from './package-path'; and for last i include all my App.js in vite.config.js like :

  • plugins: [ laravel([ 'resources/css/app.css', 'resources/js/app.js' ]) ],

I hope I have been of some help to you

1 like
SigalZ's avatar

@MirkoTdi Thank you, what I did is:

in resources/admin/admin.js:

import '../adminLTE-3.2.0/plugins/jquery/jquery.min.js'
import '../adminLTE-3.2.0/plugins/bootstrap/js/bootstrap.bundle.min.js'
import '../adminLTE-3.2.0/dist/js/adminlte.min.js'

In vite.config.js:

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/admin/admin.scss', 
                'resources/admin/admin.js'
            ],
            refresh: true,
        }),
    ],
});

And in scripts.blade:

@vite(['resources/admin/admin.js'])

It looks like it works, but I still want to understand what is the benefit of using vite instead of just calling the scripts themselves. I don't really understand what it does?

MirkoTdi's avatar

The first reason is because in case you don't go and include everything in one part of the code you would end up with a lot of code in that single place. Another benefit of vite is also that you don't need to re-update your project every time as was the case with mix.

1 like
SigalZ's avatar

@mirkotdi Aactually it looks like it doesn't work. On a page were I need jQuery it complains that jQuery is not defined.

Looking at the page's source I see this:

<script type="module" src="http://127.0.0.1:5173/@vite/client" data-navigate-track="reload"></script>
<script type="module" src="http://127.0.0.1:5173/resources/admin/admin.js" data-navigate-track="reload"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>        
        $(".datepick").datepicker({
            dateFormat: "dd/mm/yy",
            maxDate: '+0m +0w'
        });
        
        if($('#roastDate').val() == '')
            $(".datepick").datepicker("setDate", new Date());
        else
            $(".datepick").datepicker("setDate", $('#roastDate').val());          
    </script>
SigalZ's avatar

@MirkoTdi Yes I do. For some reason, today everything works. I restarted my computer, maybe some cache issues, thank you very much for all the help

1 like

Please or to participate in this conversation.