Separating Client/Admin Properly in Inertia Project

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 Laracasts Videos about Inertia when Jeffrey Way uses .extract() in mix and make let page = require to async await form: let page = await import ....

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 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?

Many Thanks in advance I greatly appreciate you time

srd9

3 years ago

Level 3

I am trying to find the right answers.

I found out that it is possible to define multiple rootViews using [email protected]:

public function rootView(Request $request)
{
   if ($request->routeIs('admin.*')) {
      return 'admin';                 
   }
  return 'app';
 }

This way I can import two different css files and ..., but honestly I don't feel that creating two apps is the right answer, I feel there must be some way like a higher order component or something else.

And what about vite.config.js then

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            ssr: 'resources/js/ssr.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    ssr: {
        noExternal: ['@inertiajs/server'],
    },
    server: {
        host: "localhost",
    },
});

I was just sharing my toughts. Thanks

1 like

sidneygijzen

3 years ago

Level 18

Good question. I have been looking into this as well lately, but unfortunately haven't found the time yet to try out some things. However, during my initial research I stumbled upon this github comment which seems promising.

1 like

rygar

1 year ago

Level 9

Hello, did you manage to do anything with this?

martinbean

1 year ago

Level 80

@rygar Just create separate CSS and JavaScript bundles for each “area” of your app.

So if you have a “client” area and an “admin” area like the OP, I’d create resources/js/client.js and resources/js/admin.js files, and built separately with Vite:

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

1 like

Please or to participate in this conversation.