Laravel Inertia Vue3

Level 1

here is my code in app.blade.php

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        
        <title inertia>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700" rel="stylesheet">

        <!-- Scripts -->
        @routes
        @vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])
        @inertiaHead
    </head>
    <body>
        @inertia
    </body>
</html>

here is my code in app.js

createInertiaApp({
    id: 'app',
    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)

            // template
            .use(store)
            .mount(el);
    },
    progress: {
        color: '#B5F1CC',
    },
});

Here is my code on applayout.vue

<template>
    <div :class="[$store.state.layout_style, $store.state.menu_style]">
        <div>
            <!--  BEGIN NAVBAR  -->
            <Header></Header>
            <!--  END NAVBAR  -->

            <!--  BEGIN MAIN CONTAINER  -->
            <div class="main-container" id="container" :class="[!$store.state.is_show_sidebar ? 'sidebar-closed sbar-open' : '', $store.state.menu_style === 'collapsible-vertical' ? 'collapsible-vertical-mobile' : '']">
                <!--  BEGIN OVERLAY  -->
                <div class="overlay" :class="{ show: !$store.state.is_show_sidebar }" @click="$store.commit('toggleSideBar', !$store.state.is_show_sidebar)"></div>
                <!-- END OVERLAY -->

                <!--  BEGIN SIDEBAR  -->
                <Sidebar></Sidebar>
                <!--  END SIDEBAR  -->

                <!--  BEGIN CONTENT AREA  -->
                <div id="content" class="main-content">
                    <slot/>
                    <!-- BEGIN FOOTER -->
                    <Footer></Footer>
                    <!-- END FOOTER -->
                </div>
                <!--  END CONTENT AREA  -->

                <!-- BEGIN APP SETTING LAUNCHER -->
                <app-settings />
                <!-- END APP SETTING LAUNCHER -->
            </div>
        </div>
    </div>
</template>

<script setup>
    import Header from "../Components/layout/header.vue";
    import Sidebar from "../Components/layout/sidebar.vue";
    import Footer from "../Components/layout/footer.vue";
    import appSettings from "../Components/app-settings.vue";
</script>

here is my code in my header.vue

<template>
    <div>
        <div class="header-container fixed-top">
            <header class="header navbar navbar-expand-sm">
                <ul class="flex-row text-center navbar-item theme-brand">
                    <li class="nav-item theme-logo">
                        <Link href="/brand">
                            Brand
                        </Link>
                    </li>
				</ul>
			</header>
	</div>
        <div class="sub-header-container">
                <div id="breadcrumb" class="vue-portal-target"></div>
		</div>
</div>
</template>
<script>

  //import Link
  import { Link } from '@inertiajs/vue3';

  export default {
    components: {
      Link
    }

  }
</script>

so, when i press the link on that head to route to brand. it turns to this error :

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')

I guess i find the source of error. The error is on Tag on header.vue, when i use <Teleport to="#breadcumb">, i get that error. Do you have any clue?

I guess vue3 is already support teleport. But how to implement it inside inertia apps?

Laravel Inertia Vue3 - Link error