Inertia / Vue: change which CSS files are used based on route

I know this has been answered in a few other threads both here and on StackOverflow, but the solutions don't quite line up with what I am looking for.

In my application, I have a stylesheet that defines the styles for all publicly facing pages, and another stylesheet that defines styles for auth-only pages.

In order to separate the two, I created two app.blade files in a public and internal directory, and in the AppServiceProvider I check to see if the route contains the string dashboard, and if it does, it runs Inertia::setRootView() accordingly.

The issue now is that the previous stylesheets persist unless there is a full page refresh, which is expected behavior of Inertia, but that means that a user looking at a public page and then going to an auth page (say, their profile page), will end up with a messed up page because the internal page is using the public / external stylesheet until the page fully refreshes.

I am unable to combine the two stylesheets, as they are both bootstrap templates, but I need to be able to include them differently based on the route

So if a user visits mySite.com/page then it uses the public css, but if they visit mySite.com/dashboard/page then it should use the internal CSS, because everything behind the auth guard has a dashboard in the uri.

Any ideas on how to accomplish this with Inertia + Vue + Laravel?

garrettmassey

3 years ago

Best Answer

Level 6

I figured it out. I didn't know you could import CSS directly in a layout Vue component like this:

<template>
    <slot />
</template>
<script>
import {Head, Link} from '@inertiajs/inertia-vue3';
import perfectScrollbar from '/public/assets/internal/lib/perfect-scrollbar/css/perfect-scrollbar.css';
import materialIcons from '/public/assets/internal/lib/material-design-icons/css/material-design-iconic-font.min.css';
import appCSS from '/public/assets/internal/css/internal.css';
export default {
    components: {
        Link, Head
    }
}
</script>

this way, I can import the css needed by the pages based on the layout file they use, so the internal layout file uses a different set of css imports and the public layout file uses the public css imports.

Please or to participate in this conversation.