Router events runs multiple times.

[boutzamat]

When i'm using the Inertia Router start event, all previous events gets logged too.
I'm using the following code:

router.on("start", (event) => {
    console.log(event);

    console.log(`Navigated to ${event}`);

    console.log("--------------");
});

This code is running in the main Layout, so it shouldn't be loaded more than once.

The purple box on the image is the console output when i click any link first time, the red box is when i click it the second time (i get both previous event and current event) and if i click it again it will continue like that (recursively).

Is this a bug, or am i doing it wrong?

[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.