Splitting (Separating) Client/Admin Properly in Inertia Project

[sinar93]

Hi everyone

I apologize if my question is not well-informed. I am still learning about this topic.

I want to use Laravel+Inertia+Vue3+SSR (with Vite) for a project.

In the Admin panel there some heavy vendor js files like ckeditor, file upload with image editor and etc that I don't want to bundle with client javascript. I Also wanted to bundle css files separately which I think its a separate concern.

I have seen about extraction in Laravel Mix in Laracasts Videos about Inertia when Jeffrey Way uses .extract() in mix and change let page = require to async await form: let page = await import .... transform one file to chunks of js file needed for each page

I have some questions:

1- Whats the best way to bundle js files in these situation with Vite? Can we bundle all client files together and extract admin files into chunks or we can only extract all files into separate files? could you please show how its done in Vite?

2 - How can I separate CSS? for example one bundle for client and one bundle for admin? I am using TailwindCSS and I know its possible to have multiple config files and separate stylesheets like: ./styles/admin.css ./styles/client.css But how can I separate this for vue-inertia? [I am not sure about importing app.css in other place than app.js, for example I'm not sure is it a good practice to define two admin and client wrapper components and import admin and client css there in ]

Many Thanks in advance I greatly appreciate you time

[reinink]

Hey I'd recommend asking this question on our Discord channel or GitHub Discussions, as it's not an issue. Good luck! 👍