Persistent layouts and named slots

[manuelteuber]

Is it possible to have named slots with persistent layouts?

Example:

Layout.vue:

<template>
    <div>
        <div class="bg-gray-800 pb-32">
            <header class="py-10">
                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

                    <slot name="title" />

                </div>
            </header>
        </div>
        <main class="-mt-32">
            <div class="max-w-7xl mx-auto pb-12 px-4 sm:px-6 lg:px-8">

                <slot/>

            </div>
        </main>
    </div>
</template>

Dasboard/Index.vue:

<template>
    <div title="Dashboard">
        <template v-slot:title>
            <div>
                Content for "title" slot...
            </div>
        </template>

        <div>
            Content for default slot...
        </div>
    </div>
</template>

<script>
    import Layout from '@/Shared/Layout'

    export default {
        layout: Layout
    }
</script>

If I try this approach, even the default slot stays empty. If I remove <template v-slot:title> from Index.vue, the default slot gets rendered.

[slovenianGooner]

Couldn't you just do...

<template>
    <layout title="Dashboard">
        <template v-slot:title>
            <div>
                Content for "title" slot...
            </div>
        </template>

        <div>
            Content for default slot...
        </div>
    </layout>
</template>

<script>
    import Layout from '@/Shared/Layout'

    export default {
         components: { Layout }
    }
</script>

[manuelteuber]

Yeah, I could, but then it's not anymore a persistent layout (see https://inertiajs.com/pages#persistent-layouts) and will get re-rendered on every navigation.

[jasonlfunk]

I would also love to see this. 👍

[manuelteuber]

Seems like this isn't so easy to implement. But there is a workaround I can live with.
See https://github.com/inertiajs/inertia-vue/issues/129#issuecomment-640848129

[gtamasmolnar]

The workaround link does not work :-(
It gives 404

[kylekz]

Any work on this? I would use the workaround in https://github.com/inertiajs/inertia-vue/issues/129#issuecomment-640848129 but I swap my layout depending on if the page is a frontend page or admin panel page, so hardcoding a layout isn't gonna work.

[claudiodekker]

Related: #171

[XhaDgr8]

Any Progress on this? it's getting more and more tricky to implement slots.

[maksymsh]

I found a solution to get this work using transform function in vite plugin.
It replaces named slots in layout with simple div#slot-name and teleport named templates to layout.
Looks creapy, but it works.

https://gist.github.com/maksymsh/0fee0e46f2d1a2b0a709b450da87c9f2

[SilverKenn]

that gist really is creepy

[fidderr]

i was able to find a crude work-around that works for me but it is not really a valid fix:

app.js inside of createInertiaApp:

    resolve: async (name) => {
      let page = await resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue'));
      page.default.layout = name.startsWith('Public/') ? undefined : layout;
      return page;
    },

example layout:

<template>
<div><span data-slot="header" /></div>
<div><slot/></div>
</template>

page:

<script setup>
import LayoutSlot from '@/Components/LayoutSlot.vue';
</script>

<template>
    <LayoutSlot slot="header">
            header slot
    </LayoutSlot>
    <div>
          main slot
    </div>
</template>

component:

<script setup>
import { onMounted, ref, toRefs, computed } from 'vue';

const props = defineProps({
    slot: {
        type: String,
        required: true
    }
});

const { slot } = toRefs(props)

const mounted = ref(false);

onMounted(() => mounted.value = true);

const to = computed(() => {
    return `[data-slot="${slot.value}"]`;
});

</script>

<template>
    <Teleport :to='to' v-if="mounted">
        <slot/>
    </Teleport>
</template>

[amadeann]

I know this thread is old, but I ran into this problem today. A solution (for Vue 2 at least) I came up with is using a render function:

Layout.vue: no changes necessary

Dasboard/Index.vue:

<template>
    <div>
      Content for default slot...
    </div>
</template>

<script>
import Layout from "@/Shared/Layout";

export default {
  layout: (h, page) => h(Layout, {
    scopedSlots: {
      title: () => h(
        "div",
        "Whatever title you want"
      ),
    }
  }, [page]),
};
</script>

The page attribute passed to render function give you Inertial Page props via page.data.props. Whatever methods you would normally access via this.someFunctionCall() in your inertia Page can be accessed via page.context.someFunctionCall().

You can pass to the slot whatever you want: simple text, or other Vue components. You just need to do it using createElement function as defined here:
https://v2.vuejs.org/v2/guide/render-function#createElement-Arguments

[hind-sagar-biswas]

It's 2024, is there any fixes or work around there yet?

[SilverKenn]

I have this setup since 2022, and its working fine for years for all I need without needing to modify anything for every type of setup

Inertia setup app.js

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: async (name) => {
        const page = await resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue'))
        try {
            const lt = page.default.lt && await resolvePageComponent(`./Layouts/Persistent/${page.default.lt}.vue`, import.meta.glob('./Layouts/Persistent/*.vue'))
            page.default.layout = lt.default
        } catch(e) {}
        return page
    },
    .
    .
})

Layouts location at /Layouts/Persistent/[name].vue
e.g.
Default.vue

<template>
    <div>
        <Banner />
        <div class="min-h-screen bg-gray-100 default-layout">
            <TopNav />
            <header v-if="$slots.header" class="bg-white shadow">
                <slot name="header" />
            </header>
            <main>
                <slot />
            </main>
        </div>
    </div>
</template>
<script setup>
    import Banner from '~/Components/Banner.vue'
    import TopNav from '~/Elements/TopNav'
</script>

Frontend.vue

<template>
	<Head :title="$page.props.title ?? 'Page'"/>
	<main class="py-5">
		<div class="max-w-7xl mx-auto sm:p-3 overflow-hidden">
			<slot />
		</div>
	</main>
</template>
<script setup>
	import { Head } from '@inertiajs/vue3'
</script>

Then for actual pages, I just use defineOptions (it will use the default template if lt option not define..

<template>
    <div class="p-4">
        Uses front-end layout
    </div>
</template>
<script setup>
defineOptions({
    lt: 'Frontend'
})
</script>

[sidjoshi001]

I've tried the teleport & it's working, you can check it out.

@manuelteuber @hind-sagar-biswas

main.ts

createInertiaApp({
resolve: (name: string) => {
        return resolvePageComponent(`./pages/${name}.vue`, import.meta.glob('./pages/**/*.vue')).then((page) => {
            page.default.layout = page.default.layout || MainLayout
            return page
        });
    },
})

MainLayout.vue

<template>
<div>
<div id="header-action"></div>
</div>
</template>

Page.vue

<Teleport defer to="#header-action">
        <Button as="inertia-link" :href="route('app.user.list')"
                severity="success" label="Create New" icon="fa-solid fa-plus"/>
</Teleport>