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

ahmedsobhy's avatar

Having multiple app.js files with Vite

I want to have separate app.js files one for the frontend and the other for the admin panel; where I have two views app.blade.php and admin.blade.php. How can I configure Vite to compile admin components in admin.js and the frontend in app.js? I'm using Inertia with Vuejs

0 likes
8 replies
thinkverse's avatar

Create an admin.js under resources/js, and add all your admin-related JavaScript there. Then add that to the input array in your Vite config, vite.config.js.

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

And now when you build you can add that like you would any other asset.

@vite('resources/js/admin.js')
3 likes
ahmedsobhy's avatar

@thinkverse How should I create the admin.js when using Inertiajs with Vuejs? How can I separate pages components?

Sinnbeck's avatar

@ahmedsobhy why do you need to split it up? Inertia already does code splitting so each page only needs the components it needs. And you can use just 1 view for both. The page is rendered by vue anyways

ahmedsobhy's avatar

@thinkverse I want to separate all admin things; so I use a second view because of ziggy to separate admin routes and I want to have "admin.js" which on the server wouldn't be publicly accessible

Sinnbeck's avatar

@ahmedsobhy ok then try what @thinkverse suggested. Two entry point files that are mostly the same I would think

Add a @vite() to both views and just remember to use regular links if you need to link between the two

Sinnbeck's avatar

Oh and admin.js (the compiled version) will be available on the server. No way around that. That's just how Javascript works

ahmedsobhy's avatar

@Sinnbeck What I was thinking is to create admin.js and have its components with it but they won't be in the public folder, they'll be served by a controller maybe from the resources/public .. so I'm asking if it is possible to make Vite compile the admin.js and its components separately and save them in resources/public not the public folder?

Sinnbeck's avatar

@ahmedsobhy not quite sure why that is necessary. But be aware that you would be forced to disable code splitting in vite to have just one huge file for admin

Please or to participate in this conversation.