Answer by zarpio for Define global component in InertiaJS with Vue 3

I was having 2 layouts for backend(admin-panel) and frontend(website), achieved as follows. Using inertia default middleware file.

project/app/Http/Middleware/HandleInertiaRequests.php

class HandleInertiaRequests extends Middleware{    protected $rootView = 'app';    public function rootView(Request $request)    {        if ($request->segment(1) == 'admin') {            return 'admin';        }        return parent::rootView($request);    }    public function version(Request $request)    {        return parent::version($request);    }    public function share(Request $request)    {        return array_merge(parent::share($request), [            //        ]);    }}

project/resources/js/Shared/Frontend/Layouts/Layout.vue

<template><Header /><slot /><Footer /></template><script>    import Header from '../Partials/Header'    import Footer from '../Partials/Footer'    export default {        components: {            Header,            Footer        },        name: "FrontendLayout"    }</script>

project/resources/js/Pages/Frontend/Auth/Login.vue

<template>    ...</template><script>    import Layout from '@/js/Shared/Frontend/Layouts/Layout';    export default {        layout: Layout,        metaInfo: { title: 'Login' },        data() {            return {                form: this.$inertia.form({'email': '','password': '','remember': false                })            }        },        methods: {            submit() {                this.form.post(route('login.store'))            }        }    }</script>