'Why opened page with AdminLTE looks broken?

I make site In laravel 9 with Inertiajs/vuejs 3 based on https://github.com/ColorlibHQ/AdminLTE 3 (dark mode). I removed all jquery and use vuejs only. it works ok for for, but when I open site is looks broken, like not all styles were loaded,

Please try enter to login into adminarea by url :

https://bi-currencies.my-demo-apps.tk/admin/currencies

credentials are in Login form

and pages looks like : https://prnt.sc/TCjBh0SefUMO 4

But if to refresh page with “CTRL+R” pages looks ok, in dark mode.

Any ideas why so and how that can be fixed?

More Details : Adminare is based on https://github.com/ColorlibHQ/AdminLTE template(with "bootstrap": "^4.6.0"). Frontend is based on custom https://technext.github.io/space/v1.0.0/ template (with Bootstrap v5.0.1 )

I have the same design issue when I switch from admin area frontend page https://bi-currencies.my-demo-apps.tk/home

I see this problem of other browsers of my Kubuntu 20 too.

Maybe problem is that that I use too different templates, but actually I use different layouts, so in

app/Http/Middleware/HandleInertiaRequests.php :

    public function rootView(Request $request)
    {
        if ($request->segment(1) == 'user') {
            return 'layouts/user';
        }
        if ($request->segment(1) == 'admin') {
            return 'layouts/adminlte'; // TODO
        }

        return 'layouts/frontend'; // Current request is front-end
    }

This project has no Redis or other chache tools installed. Sure I cleared all cache opening the site. Any other ideas? Frontend template resources/views/layouts/frontend.blade.php :

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title inertia id="app_title">{{ config('app.name', 'Laravel') }}</title>

    <link rel="shortcut icon" type="image/x-icon" href="/images/frontend_favicon.ico">

    <link href="https://fonts.googleapis.com/css2?family=Yantramanav:wght@300;400;500;700;900&amp;display=swap"
          rel="stylesheet">

    <!-- Styles -->


    @routes

    <!-- Scripts -->

    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <link rel="stylesheet" href="/css/theme.css">

    <script src="/vendors/@popperjs/popper.min.js"></script>
    <script src="/vendors/bootstrap/bootstrap.min.js"></script>
    <script src="/vendors/is/is.min.js"></script>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=window.scroll"></script>
    <script src="/vendors/fontawesome/all.min.js"></script>

    <script src="{{ mix('js/app.js') }}" defer></script>

</head>
<body class="bg-light sidebar-mini layout-fixed layout-footer-fixed">
@inertia
</body>
</html>

and admin template resources/views/layouts/adminlte.blade.php :

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title inertia id="app_title">{{ config('app.name', 'Laravel') }}</title>

        <!-- Google Font: Source Sans Pro -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">

        <!-- Styles -->

        <link rel="stylesheet" href="/css/OverlayScrollbars.min.css">
        <link rel="stylesheet" href="/css/fontawesome_all.min.css">

        <link rel="stylesheet" href="/css/adminlte.min.css">
        <link rel="stylesheet" href="/css/admin_custom.css">

        @routes

        <!-- Scripts -->
        <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

        <script src="/js/Chart.bundle.js"></script>

        <script src="/js/OverlayScrollbars.min.js"></script>

        <script src="{{ mix('js/app.js') }}" defer></script>
    </head>
    <body class="bg-light sidebar-mini layout-fixed layout-footer-fixed">
        @inertia
    </body>
</html>

1 common resources/js/app.js :

require('./bootstrap');

window.Toast = Swal.mixin({
    toast: true,
    position: 'top-end',
    showConfirmButton: false,
    timer: 3000,
    timerProgressBar: false,
    didOpen: (toast) => {
        toast.addEventListener('mouseenter', Swal.stopTimer)
        toast.addEventListener('mouseleave', Swal.resumeTimer)
    }
})

require('@fortawesome/fontawesome-free/js/all.min.js');

// Import modules...
import { createApp, h } from 'vue';
import { createInertiaApp, Link } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';

import mitt from 'mitt';
window.emitter = mitt();


const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';

import Multiselect from '@vueform/multiselect'

import VueUploadComponent from 'vue-upload-component'
import Paginate from "vuejs-paginate-next";


const app =  createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .component('inertia-link', Link)
            .component('Paginate', Paginate)
            .component('file-upload', VueUploadComponent)

            .mixin({ methods: { route } })
            .component('multiselect', Multiselect)
            .mount(el);
    },
});

InertiaProgress.init({ color: '#4B5563' });

also in admin/settings page I added “Clear Cache” button, clicking on it next commands are run :

\Artisan::call('config:cache');
\Artisan::call('route:cache');
\Artisan::call('cache:clear');
\Artisan::call('route:cache');
\Artisan::call('route:clear');
\Artisan::call('view:clear');
\Artisan::call('clear-compiled');

but clearing cache did not help with this problem.
Can it be that reason of this problem that I have 1 common resources/js/app.js both for admin area and frontend part?

Thanks!

Solution 1:^[1]

Once I was faced same problem with inertia and that works for me. Usually that happened when you used multiple-layouts, as well as those layout have different style-scripts.

Reason (problem):

As you have used one layout for frontend-pages (public pages) and other one for admin-pages.

So when user visited front-pages, all style scripts of frontend-layout loaded and it's work fine and looks good.

But, when user switched to admin-layout that's layout style-scripts not loaded. So, On hard-refresh (Crtl+R) that URL the appropriate layout style-scripts got loaded.

I read many article to switch layouts on run-time every article gives same solutions as you did in HandleInertiaRequests.php.

Solution:

Then I come to a point where I need to switch layout on clicking some link I did hard-loading as shown in below snippet instead of redirection by inertia-link:

<a :href="route('home')">
   Home                           
</a>

By this way appropriate layout style-script got loaded.

My Assumption:

Moreover, I've seen your site-source-code (Ctrl+U) as shown in screenshot. You haven't loaded style-scripts by Laravel asset() helper method.

I suggest to try once by loading scripts & style link in blade file by Laravel standard approach (using asset() method) that might be a problem.

Attach CSS sheet

  <link href="{{ asset('frontend/css/bootstrap.min.css') }}" rel="stylesheet">

Attach JavaScript/jQuery scripts

<script src="{{ asset('frontend/js/jquery-3.5.1.min.js') }}"></script>

After using asset() method, your links in site-source-code (Ctrl+U) looks something like that:

Note:

make sure you must set appropriate APP_URL in .env file.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1