Router events runs multiple times. about inertia-laravel

[craigrileyuk]

How are you calling your layout?

It’s looks like the layout setup is running with each page load, this is to be expected if your layout isn’t persistent.

[vitalijalbu]

In DEV mode maybe it's ok because everything runs twice...

[boutzamat]

How are you calling your layout?

It’s looks like the layout setup is running with each page load, this is to be expected if your layout isn’t persistent.

This is an example of my index page that uses the Layout component:
`<script setup>
import DeveloperLayout from "@/Layouts/DeveloperLayout.vue";
import PrimaryButton from "@/Components/PrimaryButton.vue";
import { PlusIcon } from "@heroicons/vue/24/outline";
import { Link, usePage } from "@inertiajs/vue3";
import { Head } from "@inertiajs/vue3";

const props = usePage().props;
</script>

    <template #header>Mine projekter</template>
    <template #header_button>
        <PrimaryButton type="link" :href="route('project.create')">
            <PlusIcon class="mr-2 w-4" />
            Opret projekt
        </PrimaryButton>
    </template>

    <section v-if="!props.projects" class="rounded-3xl bg-white p-16">
        Du har ingen projekter.
        <Link :href="route('project.create')" class="text-primary underline"
            >Opret dit første projekt her </Link
        >.
    </section>
</DeveloperLayout>

`

Pretty much the out of the box way of loading the DeveloperLayout. The DeveloperLayout is just the default Layout component renamed.
I've tried with a fresh Laravel-Inertia installation too, and the issue is the same.
The event is triggered in the DeveloperLayout component.

[boutzamat]

In DEV mode maybe it's ok because everything runs twice...

I just tested in production mode. The issue is the same.

[craigrileyuk]

Try following the instructions for Persistent Layouts instead of wrapping your layout around your page.

The way you've done it, the layout is unmounted and then re-mounted every single time you navigate. This is likely causing the event listener to be registered multiple times.