Inertia: [inertia-vue] How to pass parameters to Layout?

[gajosadrian]

How to pass parameters to Layout and then handle it in the Layout? Is it possible?

[adrianb93]

Transforming Props is what you might be looking for: https://inertiajs.com/transforming-props

[gajosadrian]

I think it won't solve my problem.. I have used vuex and mixins.

[ycs77]

Using render function pass props data to layout.

Reference: Inertia.js - Persistent layouts and Vue.js - Render Functions: createElement Arguments

[reinink]

So, there are two ways to pass data (props) to layouts, depending on what type of layouts you are using.

If you're using a parent/child layout, meaning the layout is defined with the page component, you can simply pass it as an attribute, just like you would with any prop:

<template>
  <layout title="Welcome">
    <h1>Welcome</h1>
    <p>Hello {{ user.name }}, welcome to your first Inertia app!</p>
  </layout>
</template>

However, if you're using persistent layouts it gets a little more tricky, since there isn't a direct parent/child relationship between the layout and page component. In these situations it's often best to use a global event bus. That sounds confusing, but it's honestly not. Here's a guide that shows how easy it is.

The reason it's more difficult with persistent layouts is because the page and layouts are intentionally decoupled to allow them to be rendered independently of one-another.

I hope that helps! 👍

[LucaRed]

Using persistent layouts, another possible solution for some use cases is by using Portal Vue.

You put the <portal-target> into the main layout, and define the portal content in the children views.