I’m using laravel 10 for some projects. I need to keep two different layouts and I separating from app.js and customer.js and keep one blade file.
This is app.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">
<title inertia>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
<!-- <link id="theme-css" rel="stylesheet" type="text/css" href="/themes/lara-light-indigo/theme.css"> -->
<link id="theme-css" rel="stylesheet" type="text/css" href="/themes/tailwind-light/theme.css">
<!-- Scripts -->
<?php
$route = Route::current();
$user = Auth::user();
?>
@routes
@if (($user && !$user->hasRole('user') && !$user->hasRole('restricted_user')) || $route->uri == 'login')
@vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])
@else
@vite(['resources/js/customer.js', "resources/js/Pages/{$page['component']}.vue"])
@endif
@inertiaHead
</head>
<body class="font-sans antialiased">
@inertia
</body>
</html>
this is customer.js (js/customer.js)
import './bootstrap';
import '../css/app.css';
import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy';
const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
setup({ el, App, props, plugin }) {
return createApp({ render: () => h(App, props) })
.use(plugin)
.use(ZiggyVue)
.mount(el);
},
progress: {
color: '#4B5563',
},
});
this is app.js (js/app.js)
import './bootstrap';
// import '../css/app.css';
import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy';
import LaravelPermissionToVueJS from './permissions/laravel-permission-to-vuejs';
/*
there are more imports here
*/
import '@/assets/styles.scss';
const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
setup({ el, App, props, plugin }) {
return createApp({ render: () => h(App, props) })
.use(plugin)
.use(ZiggyVue, Ziggy)
.use(ToastService)
.use(DialogService)
.use(ConfirmationService)
/*
.component()...
*/
.mount(el);
},
progress: {
color: '#4B5563',
},
});
I use one layout for admin and other for customer.
Problem is when I switch the layouts it keeps the pervious layout styles (broken styles) until it manually refreshes. How can I clear the previous styles and load current layout styles without manual refresh?
Thank you.
New contributor
Madawa Viraj is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.