How to prevent specific compontent to not be rerendered on page request

[Sairahcaz]

I use Laravel+Vue3+Inertia and have a simple vertical navbar on the left of my page.
When you hover it, the navbar gets a small css transition applied and slides its width.
But now everytime I click a navigation link the transition is abortet cause of the page load.

Is there a way to prevent my navbar component or specific components to be rerendered an a certain page request?

[claudiodekker]

Hi,

You'll probably want to use the persistent layouts feature. This feature essentially involves telling both pages to use the same 'parent' layout. When used, Inertia will automatically keep the layout mounted when navigating between (different) pages, assuming that both pages share/use that same layout.

Hope this helps!

[Sairahcaz]

Hi @claudiodekker thank you for the fast help!

I dont realy know how to acomplish this. From the docs it's not fully clear to me how to implement the persistent layout feature.

I have a AppLayout.vue looks like this:

<template>
    <div>
        <jet-banner/>

        <jet-navbar-left/>
        <jet-navbar-top/>

        <!-- Page Heading -->
        <header class="d-none py-3 bg-white shadow-sm border-bottom">
            <div class="container-fluid">
                <slot name="header"></slot>
            </div>
        </header>

        <!-- Page Content -->
        <main class="container-fluid p-5 ps-8">
            <slot></slot>
        </main>
    </div>
</template>

<script>
import JetBanner from '@/Jetstream/Banner'
import JetNavbarTop from '@/Jetstream/NavbarTop'
import JetNavbarLeft from '@/Jetstream/NavbarLeft'

export default {
    components: {
        JetBanner,
        JetNavbarTop,
        JetNavbarLeft,
    },
}
</script>

And my Dashboard.vue (and all of my other pages) are using the layout:

<template>
    <app-layout>
        <template #header>
            <h2 class="h4 fw-bold">
                Dashboard
            </h2>
        </template>

        <welcome/>
    </app-layout>
</template>

<script>
import AppLayout from '@/Layouts/AppLayout'
import Welcome from '@/Jetstream/Welcome'

export default {
    components: {
        AppLayout,
        Welcome,
    },
}
</script>

If I put such a line in my Dashboard.vue the page seams to rerender in it self...

export default {
    layout: (h, page) => h(AppLayout, [page]),
    components: {
        AppLayout,
        Welcome,
    },
}

[claudiodekker]

Alright.. I'm on my phone right now, so I'll keep my answer short, but try this:

1. Remove the wrapping <app-layout> in your Dashboard file
2. Add layout: AppLayout to your Dashboard file
3. Do the same thing in your other page component(s)

Something like this:

<template>
  <div>
    This is your page content.
    <welcome />
  </div>
</template>

<script>
import AppLayout from '@/Layouts/AppLayout'
import Welcome from '@/Jetstream/Welcome'

export default {
    layout: AppLayout,
    components: {
        Welcome,
    },
}
</script>

[Sairahcaz]

Okay it worked!
Was a bit late yesterday :D
It was not clear to me that I need to apply it to all components...
Thanks a lot!

[Sairahcaz]

Much easier and a good default for my pages which also fixes this issue is to fix it in the resolveComponent function: https://inertiajs.com/pages#default-layouts