1

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:wght@300;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
Matt
  • 3,206
  • 4
  • 24
  • 26
  • This probably won't have anything to do with Vue – Phil Sep 17 '20 at 02:00
  • Not sure if this is the cause, but may it be due to the render of Vue component is done before the styles from the html file is applied to the component? Maybe you can try putting the styles in your Vue component instead? – Chan Yung Keat Sep 17 '20 at 07:37

1 Answers1

1

Someone had something similar and decided to show an overlay on foreground and hide it after the page has loaded. I'm not sure that it's the best solution but it could help:

Force browsers to load CSS before showing the page

Octet
  • 841
  • 4
  • 12
  • thank you @Octet ! I ended up doing pretty much this. In case anyone else is trying this, in app.js I added this in the data section: vueAppLoading: true, and this in the created section: this.vueAppLoading = false; And in the Laravel layouts/app I just wrapped the whole page in – Matt Dec 04 '20 at 18:52