CSS loading slow and causing temporary weird formatting on Laravel app with Blade and Vue

  laravel, laravel-blade, vue.js

I have a Laravel app that uses a tiny bit of Vue code in the blade templates. There’s a problem navigating from view to view, almost every time there’s a brief delay before the CSS is loaded where the raw text of the page shows without any formatting. It shows for about 1/2 a second and then the CSS kicks in and it looks correct. I can’t find any reason for this, I tried changing the mix(‘css/app.css’) etc so that it’s not having to reload every time, but I can’t figure out how to fix it.

I’m not sure if Vue is somehow delaying the css from loading? Any ideas what it could be? I’ll paste the top section of the blade template below. I just upgraded to Laravel 8 but the same was happening with Laravel 7.

Thanks for your help!

<!doctype html>

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="title" content="Pono Admin">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>Admin</title>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:[email protected];400;700&display=swap" rel="stylesheet">

    <!-- Styles -->
    <link href="{{ mix('css/app.css') }}" rel="stylesheet">
    <link href="{{ mix('css/admin.css') }}" rel="stylesheet">
    @hasSection('style')
        @yield('style')
    @endif

    <!-- Scripts -->
    @hasSection('script')
        @yield('script')
    @else
        <script>
            var vmMixinsAdmin = '';
        </script>
    @endif
    <script src="{{ mix('/js/app.js') }}" defer></script>
    <script>
        var vmMixinsApp = '';
        let vroundedBtn = false;
        let vunreadNotificationCount = {{ auth()->user()->unreadNotifications()->count() }};
    </script>
</head>

<body>

    <div id="vm">

        <main id="app-main" class="container-fluid px-0">

        etc

Source: Laravel

Leave a Reply