[{"data":1,"prerenderedAt":1414},["ShallowReactive",2],{"writing-convenient-way-to-use-layouts-in-inertia":3},{"id":4,"title":5,"body":6,"category":1399,"date":1400,"description":1401,"excerpt":1402,"extension":1403,"image":1404,"keywords":1405,"meta":1406,"navigation":157,"path":1407,"readingTime":1408,"seo":1409,"slug":1410,"stem":1411,"tags":1412,"__hash__":1413},"blog\u002Fblog\u002Fconvenient-way-to-use-layouts-in-inertia.md","Convenient way to use layouts in Inertia",{"type":7,"value":8,"toc":1394},"minimark",[9,26,29,34,54,236,255,259,262,457,460,495,513,526,536,661,664,671,733,792,795,799,802,833,836,940,943,946,1043,1046,1056,1139,1145,1148,1377,1380,1387,1390],[10,11,12,13,20,21,25],"p",{},"If you are a Laravel developer, you have probably heard of ",[14,15,19],"a",{"href":16,"rel":17},"https:\u002F\u002Finertiajs.com\u002F",[18],"nofollow","Inertia.js",", the modern monolith. With Inertia, you can ",[22,23,24],"em",{},"quickly build modern single-page React, Vue and Svelte apps using classic server-side routing and controllers."," This makes Inertia a perfect choice for building some web apps.",[10,27,28],{},"Inertia gained a lot of traction in the past few months, so I have decided to give it a shot and build something with it. Installing and configuring it was easy, the documentation is awesome and I had no difficulties setting up my project. It took me a little bit of time to adapt to the mental model of how Inertia works, but after wrapping my head around it I started building the app.",[30,31,33],"h3",{"id":32},"building-my-first-page-and-the-need-for-a-layout","Building my first page and the need for a layout",[10,35,36,37,41,42,45,46,49,50,53],{},"Every app you have built has a layout that you wrap around your pages. Usually, the Layout has the ",[38,39,40],"code",{},"Header"," the ",[38,43,44],{},"Footer"," and a ",[38,47,48],{},"slot"," (or ",[38,51,52],{},"router-view",") tag where you insert the content based on the route you are in. In the documentation, there is a straightforward example of a page, which you can also see attached in the code below.",[55,56,61],"pre",{"className":57,"code":58,"language":59,"meta":60,"style":60},"language-js shiki shiki-themes github-light github-dark","  \u003Ctemplate>\n    \u003Clayout title=\"Welcome\">\n      \u003Ch1>Welcome\u003C\u002Fh1>\n      \u003Cp>Hello {{ user.name }}, welcome to your first Inertia app!\u003C\u002Fp>\n    \u003C\u002Flayout>\n  \u003C\u002Ftemplate>\n\n  \u003Cscript>\n    import Layout from '.\u002FLayout'\n\n    export default {\n      components: {\n        Layout,\n      },\n      props: {\n        user: Object,\n      },\n    }\n  \u003C\u002Fscript>\n","js","",[38,62,63,79,102,118,132,142,152,159,169,175,180,186,192,198,204,210,216,221,227],{"__ignoreMap":60},[64,65,68,72,76],"span",{"class":66,"line":67},"line",1,[64,69,71],{"class":70},"sVt8B","  \u003C",[64,73,75],{"class":74},"s9eBZ","template",[64,77,78],{"class":70},">\n",[64,80,82,85,88,92,96,100],{"class":66,"line":81},2,[64,83,84],{"class":70},"    \u003C",[64,86,87],{"class":74},"layout",[64,89,91],{"class":90},"sScJk"," title",[64,93,95],{"class":94},"szBVR","=",[64,97,99],{"class":98},"sZZnC","\"Welcome\"",[64,101,78],{"class":70},[64,103,105,108,111,114,116],{"class":66,"line":104},3,[64,106,107],{"class":70},"      \u003C",[64,109,110],{"class":74},"h1",[64,112,113],{"class":70},">Welcome\u003C\u002F",[64,115,110],{"class":74},[64,117,78],{"class":70},[64,119,121,123,125,128,130],{"class":66,"line":120},4,[64,122,107],{"class":70},[64,124,10],{"class":74},[64,126,127],{"class":70},">Hello {{ user.name }}, welcome to your first Inertia app!\u003C\u002F",[64,129,10],{"class":74},[64,131,78],{"class":70},[64,133,135,138,140],{"class":66,"line":134},5,[64,136,137],{"class":70},"    \u003C\u002F",[64,139,87],{"class":74},[64,141,78],{"class":70},[64,143,145,148,150],{"class":66,"line":144},6,[64,146,147],{"class":70},"  \u003C\u002F",[64,149,75],{"class":74},[64,151,78],{"class":70},[64,153,155],{"class":66,"line":154},7,[64,156,158],{"emptyLinePlaceholder":157},true,"\n",[64,160,162,164,167],{"class":66,"line":161},8,[64,163,71],{"class":70},[64,165,166],{"class":74},"script",[64,168,78],{"class":70},[64,170,172],{"class":66,"line":171},9,[64,173,174],{"class":70},"    import Layout from '.\u002FLayout'\n",[64,176,178],{"class":66,"line":177},10,[64,179,158],{"emptyLinePlaceholder":157},[64,181,183],{"class":66,"line":182},11,[64,184,185],{"class":70},"    export default {\n",[64,187,189],{"class":66,"line":188},12,[64,190,191],{"class":70},"      components: {\n",[64,193,195],{"class":66,"line":194},13,[64,196,197],{"class":70},"        Layout,\n",[64,199,201],{"class":66,"line":200},14,[64,202,203],{"class":70},"      },\n",[64,205,207],{"class":66,"line":206},15,[64,208,209],{"class":70},"      props: {\n",[64,211,213],{"class":66,"line":212},16,[64,214,215],{"class":70},"        user: Object,\n",[64,217,219],{"class":66,"line":218},17,[64,220,203],{"class":70},[64,222,224],{"class":66,"line":223},18,[64,225,226],{"class":70},"    }\n",[64,228,230,232,234],{"class":66,"line":229},19,[64,231,147],{"class":70},[64,233,166],{"class":74},[64,235,78],{"class":70},[10,237,238,239,241,242,245,246,250,251,254],{},"As you can see from the example, you need to wrap every page with the Layout, insert that layout in the ",[38,240,166],{}," tag and add it to the ",[38,243,244],{},"components"," key. This gives you the flexibility that you might need if you are using different layouts, but what if we could find a ",[247,248,249],"strong",{},"better",", ",[247,252,253],{},"more convenient"," way to make this happen?",[30,256,258],{"id":257},"the-first-and-flawed-approach-i-went-for","The first (and flawed) approach I went for",[10,260,261],{},"To use Inertia in your Vue app, you just have to copy and paste their code snippet from the documentation and you are good to go.",[55,263,265],{"className":57,"code":264,"language":59,"meta":60,"style":60},"import { InertiaApp } from \"@inertiajs\u002Finertia-vue\";\nimport Vue from \"vue\";\n\nVue.use(InertiaApp);\n\nconst app = document.getElementById(\"app\");\n\nnew Vue({\n  render: (h) =>\n    h(InertiaApp, {\n      props: {\n        initialPage: JSON.parse(app.dataset.page),\n        resolveComponent: (name) => require(`.\u002FPages\u002F${name}`).default,\n      },\n    }),\n}).$mount(app);\n",[38,266,267,284,298,302,313,317,344,348,359,377,385,389,406,437,441,446],{"__ignoreMap":60},[64,268,269,272,275,278,281],{"class":66,"line":67},[64,270,271],{"class":94},"import",[64,273,274],{"class":70}," { InertiaApp } ",[64,276,277],{"class":94},"from",[64,279,280],{"class":98}," \"@inertiajs\u002Finertia-vue\"",[64,282,283],{"class":70},";\n",[64,285,286,288,291,293,296],{"class":66,"line":81},[64,287,271],{"class":94},[64,289,290],{"class":70}," Vue ",[64,292,277],{"class":94},[64,294,295],{"class":98}," \"vue\"",[64,297,283],{"class":70},[64,299,300],{"class":66,"line":104},[64,301,158],{"emptyLinePlaceholder":157},[64,303,304,307,310],{"class":66,"line":120},[64,305,306],{"class":70},"Vue.",[64,308,309],{"class":90},"use",[64,311,312],{"class":70},"(InertiaApp);\n",[64,314,315],{"class":66,"line":134},[64,316,158],{"emptyLinePlaceholder":157},[64,318,319,322,326,329,332,335,338,341],{"class":66,"line":144},[64,320,321],{"class":94},"const",[64,323,325],{"class":324},"sj4cs"," app",[64,327,328],{"class":94}," =",[64,330,331],{"class":70}," document.",[64,333,334],{"class":90},"getElementById",[64,336,337],{"class":70},"(",[64,339,340],{"class":98},"\"app\"",[64,342,343],{"class":70},");\n",[64,345,346],{"class":66,"line":154},[64,347,158],{"emptyLinePlaceholder":157},[64,349,350,353,356],{"class":66,"line":161},[64,351,352],{"class":94},"new",[64,354,355],{"class":90}," Vue",[64,357,358],{"class":70},"({\n",[64,360,361,364,367,371,374],{"class":66,"line":171},[64,362,363],{"class":90},"  render",[64,365,366],{"class":70},": (",[64,368,370],{"class":369},"s4XuR","h",[64,372,373],{"class":70},") ",[64,375,376],{"class":94},"=>\n",[64,378,379,382],{"class":66,"line":177},[64,380,381],{"class":90},"    h",[64,383,384],{"class":70},"(InertiaApp, {\n",[64,386,387],{"class":66,"line":182},[64,388,209],{"class":70},[64,390,391,394,397,400,403],{"class":66,"line":188},[64,392,393],{"class":70},"        initialPage: ",[64,395,396],{"class":324},"JSON",[64,398,399],{"class":70},".",[64,401,402],{"class":90},"parse",[64,404,405],{"class":70},"(app.dataset.page),\n",[64,407,408,411,413,416,418,421,424,426,429,431,434],{"class":66,"line":194},[64,409,410],{"class":90},"        resolveComponent",[64,412,366],{"class":70},[64,414,415],{"class":369},"name",[64,417,373],{"class":70},[64,419,420],{"class":94},"=>",[64,422,423],{"class":90}," require",[64,425,337],{"class":70},[64,427,428],{"class":98},"`.\u002FPages\u002F${",[64,430,415],{"class":70},[64,432,433],{"class":98},"}`",[64,435,436],{"class":70},").default,\n",[64,438,439],{"class":66,"line":200},[64,440,203],{"class":70},[64,442,443],{"class":66,"line":206},[64,444,445],{"class":70},"    }),\n",[64,447,448,451,454],{"class":66,"line":212},[64,449,450],{"class":70},"}).",[64,452,453],{"class":90},"$mount",[64,455,456],{"class":70},"(app);\n",[10,458,459],{},"Let's dive into this code so you can understand why I thought of this solution first.",[10,461,462,463,466,467,470,471,474,475,477,478,480,481,484,485,487,488,491,492,494],{},"First, we include the ",[38,464,465],{},"InertiaApp"," and inject it in our ",[38,468,469],{},"Vue"," instance. Then, we get the ",[38,472,473],{},"selector"," we want to ",[38,476,453],{}," our Vue app in, and instantiate our ",[38,479,469],{}," instance. The object we pass to the constructor has only one property, and its the ",[38,482,483],{},"render"," property, which as it states, renders our the app. It has one argument, ",[38,486,370],{}," which is the ",[38,489,490],{},"render function"," we call to render our ",[38,493,465],{}," component.",[10,496,497,498,500,501,504,505,508,509,512],{},"If you never used the ",[38,499,483],{}," function in your Vue apps, it can take three arguments, first one is a ",[38,502,503],{},"Vue instance"," (Vue Component), the second one is the ",[38,506,507],{},"data"," passed to that component, and the third one is an ",[38,510,511],{},"array"," of children included in the component.",[10,514,515,516,518,519,522,523,525],{},"As you can see in the code above, we are rendering the ",[38,517,465],{}," ",[38,520,521],{},"render: h => h(InertiaApp, ...)"," we pass some ",[38,524,507],{}," as the second argument, and there are no children rendered for this component.",[10,527,528,529,531,532,535],{},"My initial approach was, what if we wrap the whole ",[38,530,465],{}," in the ",[38,533,534],{},"Layout"," we are going to use. The end code snippet looked like this",[55,537,539],{"className":57,"code":538,"language":59,"meta":60,"style":60},"import App from \".\u002Flayout\u002FApp\";\n\nnew Vue({\n  render: (h) =>\n    h(App, {}, [\n      InertiaApp,\n      {\n        props: {\n          initialPage: JSON.parse(app.dataset.page),\n          resolveComponent: (name) => require(`.\u002FPages\u002F${name}`).default,\n        },\n      },\n    ]),\n}).$mount(app);\n",[38,540,541,555,559,567,579,586,591,596,601,614,639,644,648,653],{"__ignoreMap":60},[64,542,543,545,548,550,553],{"class":66,"line":67},[64,544,271],{"class":94},[64,546,547],{"class":70}," App ",[64,549,277],{"class":94},[64,551,552],{"class":98}," \".\u002Flayout\u002FApp\"",[64,554,283],{"class":70},[64,556,557],{"class":66,"line":81},[64,558,158],{"emptyLinePlaceholder":157},[64,560,561,563,565],{"class":66,"line":104},[64,562,352],{"class":94},[64,564,355],{"class":90},[64,566,358],{"class":70},[64,568,569,571,573,575,577],{"class":66,"line":120},[64,570,363],{"class":90},[64,572,366],{"class":70},[64,574,370],{"class":369},[64,576,373],{"class":70},[64,578,376],{"class":94},[64,580,581,583],{"class":66,"line":134},[64,582,381],{"class":90},[64,584,585],{"class":70},"(App, {}, [\n",[64,587,588],{"class":66,"line":144},[64,589,590],{"class":70},"      InertiaApp,\n",[64,592,593],{"class":66,"line":154},[64,594,595],{"class":70},"      {\n",[64,597,598],{"class":66,"line":161},[64,599,600],{"class":70},"        props: {\n",[64,602,603,606,608,610,612],{"class":66,"line":171},[64,604,605],{"class":70},"          initialPage: ",[64,607,396],{"class":324},[64,609,399],{"class":70},[64,611,402],{"class":90},[64,613,405],{"class":70},[64,615,616,619,621,623,625,627,629,631,633,635,637],{"class":66,"line":177},[64,617,618],{"class":90},"          resolveComponent",[64,620,366],{"class":70},[64,622,415],{"class":369},[64,624,373],{"class":70},[64,626,420],{"class":94},[64,628,423],{"class":90},[64,630,337],{"class":70},[64,632,428],{"class":98},[64,634,415],{"class":70},[64,636,433],{"class":98},[64,638,436],{"class":70},[64,640,641],{"class":66,"line":182},[64,642,643],{"class":70},"        },\n",[64,645,646],{"class":66,"line":188},[64,647,203],{"class":70},[64,649,650],{"class":66,"line":194},[64,651,652],{"class":70},"    ]),\n",[64,654,655,657,659],{"class":66,"line":200},[64,656,450],{"class":70},[64,658,453],{"class":90},[64,660,456],{"class":70},[10,662,663],{},"Now, we don't have to include our Layout in every component. But, this approach is flawed and I am going to explain why.",[10,665,666,667,670],{},"The ",[247,668,669],{},"first flaw"," of this approach is because this approach is not flexible. Meaning that you will be stuck with the same layout on every Inertia page you build. This flaw can limit you in many ways.",[10,672,666,673,676,677,680,681,683,684,687,688,691,692,695,696,703,704,706,707,710,711,713,714,717,718,721,722,725,726,729,730,732],{},[247,674,675],{},"second, and deeper flaw"," that I have found with this approach is that you cannot access the ",[38,678,679],{},"$page"," property within your layout. The ",[38,682,679],{}," property, contains ",[247,685,686],{},"shared data"," you pass from your backend to your frontend. For example, if you want to show a simple ",[22,689,690],{},"Welcome {username}"," message in your Header (which is in the Layout), you need to share the authenticated user from the backend to the frontend. But, if you try to access your ",[38,693,694],{},"$page.user"," property within your Layout you will get an error saying that ",[22,697,698,699,702],{},"can not get property ",[38,700,701],{},"user"," of undefined."," At first, this error didn't make any sense. I can use the ",[38,705,694],{}," property in my ",[38,708,709],{},"pages",", but I cannot use it in my Layout. After debugging for some time and looking at the Inertia's source code, I have found out that internally Inertia injects the ",[38,712,679],{}," property ",[38,715,716],{},"Object.defineProperty(Vue.prototype, '$page', { get: () => app.props })"," in our Vue instance, which is a ",[38,719,720],{},"getter"," that returns the ",[38,723,724],{},"props"," of the ",[38,727,728],{},"app",", and if you go back to the previous code snippet, we pass the shared data from our backend in our ",[38,731,465],{}," component as a prop",[55,734,736],{"className":57,"code":735,"language":59,"meta":60,"style":60},"props: {\n    initialPage: JSON.parse(app.dataset.page),\n    resolveComponent: (name) => require(`.\u002FPages\u002F${name}`).default\n}\n",[38,737,738,745,761,787],{"__ignoreMap":60},[64,739,740,742],{"class":66,"line":67},[64,741,724],{"class":90},[64,743,744],{"class":70},": {\n",[64,746,747,750,753,755,757,759],{"class":66,"line":81},[64,748,749],{"class":90},"    initialPage",[64,751,752],{"class":70},": ",[64,754,396],{"class":324},[64,756,399],{"class":70},[64,758,402],{"class":90},[64,760,405],{"class":70},[64,762,763,766,768,770,772,774,776,778,780,782,784],{"class":66,"line":104},[64,764,765],{"class":90},"    resolveComponent",[64,767,366],{"class":70},[64,769,415],{"class":369},[64,771,373],{"class":70},[64,773,420],{"class":94},[64,775,423],{"class":90},[64,777,337],{"class":70},[64,779,428],{"class":98},[64,781,415],{"class":70},[64,783,433],{"class":98},[64,785,786],{"class":70},").default\n",[64,788,789],{"class":66,"line":120},[64,790,791],{"class":70},"}\n",[10,793,794],{},"which are then parsed and injected in the Vue instance. To simplify the flaw, the Layout did not have access to the shared data passed from our server.",[30,796,798],{"id":797},"solving-the-flaws-with-a-convenient-solution","Solving the flaws with a convenient solution",[10,800,801],{},"Let's get back to our snippet above. We resolve the current page with this code",[55,803,805],{"className":57,"code":804,"language":59,"meta":60,"style":60},"resolveComponent: (name) => require(`.\u002FPages\u002F${name}`).default;\n",[38,806,807],{"__ignoreMap":60},[64,808,809,812,814,816,818,820,822,824,826,828,830],{"class":66,"line":67},[64,810,811],{"class":90},"resolveComponent",[64,813,366],{"class":70},[64,815,415],{"class":369},[64,817,373],{"class":70},[64,819,420],{"class":94},[64,821,423],{"class":90},[64,823,337],{"class":70},[64,825,428],{"class":98},[64,827,415],{"class":70},[64,829,433],{"class":98},[64,831,832],{"class":70},").default;\n",[10,834,835],{},"As you can see, we require the page (as a module), and return the default export from that module. Within that default export we can find all of the current page's data, including the layout. So, what if we modify the module, include the default layout and then return the modified module? Now, we don't have to wrap all of our pages with the layout. The code now looks like this",[55,837,839],{"className":57,"code":838,"language":59,"meta":60,"style":60},"import App from \".\u002Flayout\u002FApp\";\n\n\u002F\u002F\n\nresolveComponent: (name) => {\n  const module = require(`.\u002FPages\u002F${name}`);\n\n  module.default.layout = App;\n\n  return module.default;\n};\n",[38,840,841,853,857,863,867,882,904,908,921,925,935],{"__ignoreMap":60},[64,842,843,845,847,849,851],{"class":66,"line":67},[64,844,271],{"class":94},[64,846,547],{"class":70},[64,848,277],{"class":94},[64,850,552],{"class":98},[64,852,283],{"class":70},[64,854,855],{"class":66,"line":81},[64,856,158],{"emptyLinePlaceholder":157},[64,858,859],{"class":66,"line":104},[64,860,862],{"class":861},"sJ8bj","\u002F\u002F\n",[64,864,865],{"class":66,"line":120},[64,866,158],{"emptyLinePlaceholder":157},[64,868,869,871,873,875,877,879],{"class":66,"line":134},[64,870,811],{"class":90},[64,872,366],{"class":70},[64,874,415],{"class":369},[64,876,373],{"class":70},[64,878,420],{"class":94},[64,880,881],{"class":70}," {\n",[64,883,884,887,890,892,894,896,898,900,902],{"class":66,"line":144},[64,885,886],{"class":94},"  const",[64,888,889],{"class":324}," module",[64,891,328],{"class":94},[64,893,423],{"class":90},[64,895,337],{"class":70},[64,897,428],{"class":98},[64,899,415],{"class":70},[64,901,433],{"class":98},[64,903,343],{"class":70},[64,905,906],{"class":66,"line":154},[64,907,158],{"emptyLinePlaceholder":157},[64,909,910,913,916,918],{"class":66,"line":161},[64,911,912],{"class":324},"  module",[64,914,915],{"class":70},".default.layout ",[64,917,95],{"class":94},[64,919,920],{"class":70}," App;\n",[64,922,923],{"class":66,"line":171},[64,924,158],{"emptyLinePlaceholder":157},[64,926,927,930,932],{"class":66,"line":177},[64,928,929],{"class":94},"  return",[64,931,889],{"class":324},[64,933,934],{"class":70},".default;\n",[64,936,937],{"class":66,"line":182},[64,938,939],{"class":70},"};\n",[10,941,942],{},"Now, we have set a default Layout for all of our Inertia pages. But we still haven't solved the flaws we mentioned. Let's do that.",[10,944,945],{},"To solve the first flaw, we can modify the code snipped above in a way that allows us to add the default Layout only if there is no layout already defined.",[55,947,949],{"className":57,"code":948,"language":59,"meta":60,"style":60},"resolveComponent: (name) => {\n  const module = require(`.\u002FPages\u002F${name}`);\n\n  if (!module.default.layout) {\n    \u002F\u002F there is no Layout defined, set the default layout\n    module.default.layout = App;\n  }\n\n  return module.default;\n};\n",[38,950,951,965,985,989,1006,1011,1022,1027,1031,1039],{"__ignoreMap":60},[64,952,953,955,957,959,961,963],{"class":66,"line":67},[64,954,811],{"class":90},[64,956,366],{"class":70},[64,958,415],{"class":369},[64,960,373],{"class":70},[64,962,420],{"class":94},[64,964,881],{"class":70},[64,966,967,969,971,973,975,977,979,981,983],{"class":66,"line":81},[64,968,886],{"class":94},[64,970,889],{"class":324},[64,972,328],{"class":94},[64,974,423],{"class":90},[64,976,337],{"class":70},[64,978,428],{"class":98},[64,980,415],{"class":70},[64,982,433],{"class":98},[64,984,343],{"class":70},[64,986,987],{"class":66,"line":104},[64,988,158],{"emptyLinePlaceholder":157},[64,990,991,994,997,1000,1003],{"class":66,"line":120},[64,992,993],{"class":94},"  if",[64,995,996],{"class":70}," (",[64,998,999],{"class":94},"!",[64,1001,1002],{"class":324},"module",[64,1004,1005],{"class":70},".default.layout) {\n",[64,1007,1008],{"class":66,"line":134},[64,1009,1010],{"class":861},"    \u002F\u002F there is no Layout defined, set the default layout\n",[64,1012,1013,1016,1018,1020],{"class":66,"line":144},[64,1014,1015],{"class":324},"    module",[64,1017,915],{"class":70},[64,1019,95],{"class":94},[64,1021,920],{"class":70},[64,1023,1024],{"class":66,"line":154},[64,1025,1026],{"class":70},"  }\n",[64,1028,1029],{"class":66,"line":161},[64,1030,158],{"emptyLinePlaceholder":157},[64,1032,1033,1035,1037],{"class":66,"line":171},[64,1034,929],{"class":94},[64,1036,889],{"class":324},[64,1038,934],{"class":70},[64,1040,1041],{"class":66,"line":177},[64,1042,939],{"class":70},[10,1044,1045],{},"We now achieved flexibility and solved the first flaw.",[10,1047,1048,1049,1052,1053,1055],{},"As for the second flaw, if we have a look at the source code for the ",[38,1050,1051],{},"inertia-vue\u002Fsrc\u002Fapp.js"," you can see that we have the following piece of code in the ",[38,1054,483],{}," function",[55,1057,1059],{"className":57,"code":1058,"language":59,"meta":60,"style":60},"if (this.component.layout) {\n  if (typeof this.component.layout === \"function\") {\n    return this.component.layout(h, child);\n  }\n\n  return h(this.component.layout, [child]);\n}\n",[38,1060,1061,1074,1098,1113,1117,1121,1135],{"__ignoreMap":60},[64,1062,1063,1066,1068,1071],{"class":66,"line":67},[64,1064,1065],{"class":94},"if",[64,1067,996],{"class":70},[64,1069,1070],{"class":324},"this",[64,1072,1073],{"class":70},".component.layout) {\n",[64,1075,1076,1078,1080,1083,1086,1089,1092,1095],{"class":66,"line":81},[64,1077,993],{"class":94},[64,1079,996],{"class":70},[64,1081,1082],{"class":94},"typeof",[64,1084,1085],{"class":324}," this",[64,1087,1088],{"class":70},".component.layout ",[64,1090,1091],{"class":94},"===",[64,1093,1094],{"class":98}," \"function\"",[64,1096,1097],{"class":70},") {\n",[64,1099,1100,1103,1105,1108,1110],{"class":66,"line":104},[64,1101,1102],{"class":94},"    return",[64,1104,1085],{"class":324},[64,1106,1107],{"class":70},".component.",[64,1109,87],{"class":90},[64,1111,1112],{"class":70},"(h, child);\n",[64,1114,1115],{"class":66,"line":120},[64,1116,1026],{"class":70},[64,1118,1119],{"class":66,"line":134},[64,1120,158],{"emptyLinePlaceholder":157},[64,1122,1123,1125,1128,1130,1132],{"class":66,"line":144},[64,1124,929],{"class":94},[64,1126,1127],{"class":90}," h",[64,1129,337],{"class":70},[64,1131,1070],{"class":324},[64,1133,1134],{"class":70},".component.layout, [child]);\n",[64,1136,1137],{"class":66,"line":154},[64,1138,791],{"class":70},[10,1140,1141,1142,1144],{},"This code ensures that the all of the props are transformed and injected in our app before we render the layout, so now we can access our ",[38,1143,679],{}," property in the Layout as well.",[10,1146,1147],{},"At the end, we have ended up with the following code snippet.",[55,1149,1151],{"className":57,"code":1150,"language":59,"meta":60,"style":60},"import { InertiaApp } from \"@inertiajs\u002Finertia-vue\";\nimport Vue from \"vue\";\nimport App from \".\u002FLayouts\u002FApp\";\n\nVue.use(InertiaApp);\n\nconst app = document.getElementById(\"app\");\n\nnew Vue({\n  render: (h) =>\n    h(InertiaApp, {\n      props: {\n        initialPage: JSON.parse(app.dataset.page),\n        resolveComponent: (name) => {\n          const module = require(`.\u002FPages\u002F${name}`);\n\n          if (!module.default.layout) {\n            module.default.layout = App;\n          }\n\n          return module.default;\n        },\n      },\n    }),\n}).$mount(app);\n",[38,1152,1153,1165,1177,1190,1194,1202,1206,1224,1228,1236,1248,1254,1258,1270,1284,1305,1309,1322,1333,1338,1343,1353,1358,1363,1368],{"__ignoreMap":60},[64,1154,1155,1157,1159,1161,1163],{"class":66,"line":67},[64,1156,271],{"class":94},[64,1158,274],{"class":70},[64,1160,277],{"class":94},[64,1162,280],{"class":98},[64,1164,283],{"class":70},[64,1166,1167,1169,1171,1173,1175],{"class":66,"line":81},[64,1168,271],{"class":94},[64,1170,290],{"class":70},[64,1172,277],{"class":94},[64,1174,295],{"class":98},[64,1176,283],{"class":70},[64,1178,1179,1181,1183,1185,1188],{"class":66,"line":104},[64,1180,271],{"class":94},[64,1182,547],{"class":70},[64,1184,277],{"class":94},[64,1186,1187],{"class":98}," \".\u002FLayouts\u002FApp\"",[64,1189,283],{"class":70},[64,1191,1192],{"class":66,"line":120},[64,1193,158],{"emptyLinePlaceholder":157},[64,1195,1196,1198,1200],{"class":66,"line":134},[64,1197,306],{"class":70},[64,1199,309],{"class":90},[64,1201,312],{"class":70},[64,1203,1204],{"class":66,"line":144},[64,1205,158],{"emptyLinePlaceholder":157},[64,1207,1208,1210,1212,1214,1216,1218,1220,1222],{"class":66,"line":154},[64,1209,321],{"class":94},[64,1211,325],{"class":324},[64,1213,328],{"class":94},[64,1215,331],{"class":70},[64,1217,334],{"class":90},[64,1219,337],{"class":70},[64,1221,340],{"class":98},[64,1223,343],{"class":70},[64,1225,1226],{"class":66,"line":161},[64,1227,158],{"emptyLinePlaceholder":157},[64,1229,1230,1232,1234],{"class":66,"line":171},[64,1231,352],{"class":94},[64,1233,355],{"class":90},[64,1235,358],{"class":70},[64,1237,1238,1240,1242,1244,1246],{"class":66,"line":177},[64,1239,363],{"class":90},[64,1241,366],{"class":70},[64,1243,370],{"class":369},[64,1245,373],{"class":70},[64,1247,376],{"class":94},[64,1249,1250,1252],{"class":66,"line":182},[64,1251,381],{"class":90},[64,1253,384],{"class":70},[64,1255,1256],{"class":66,"line":188},[64,1257,209],{"class":70},[64,1259,1260,1262,1264,1266,1268],{"class":66,"line":194},[64,1261,393],{"class":70},[64,1263,396],{"class":324},[64,1265,399],{"class":70},[64,1267,402],{"class":90},[64,1269,405],{"class":70},[64,1271,1272,1274,1276,1278,1280,1282],{"class":66,"line":200},[64,1273,410],{"class":90},[64,1275,366],{"class":70},[64,1277,415],{"class":369},[64,1279,373],{"class":70},[64,1281,420],{"class":94},[64,1283,881],{"class":70},[64,1285,1286,1289,1291,1293,1295,1297,1299,1301,1303],{"class":66,"line":206},[64,1287,1288],{"class":94},"          const",[64,1290,889],{"class":324},[64,1292,328],{"class":94},[64,1294,423],{"class":90},[64,1296,337],{"class":70},[64,1298,428],{"class":98},[64,1300,415],{"class":70},[64,1302,433],{"class":98},[64,1304,343],{"class":70},[64,1306,1307],{"class":66,"line":212},[64,1308,158],{"emptyLinePlaceholder":157},[64,1310,1311,1314,1316,1318,1320],{"class":66,"line":218},[64,1312,1313],{"class":94},"          if",[64,1315,996],{"class":70},[64,1317,999],{"class":94},[64,1319,1002],{"class":324},[64,1321,1005],{"class":70},[64,1323,1324,1327,1329,1331],{"class":66,"line":223},[64,1325,1326],{"class":324},"            module",[64,1328,915],{"class":70},[64,1330,95],{"class":94},[64,1332,920],{"class":70},[64,1334,1335],{"class":66,"line":229},[64,1336,1337],{"class":70},"          }\n",[64,1339,1341],{"class":66,"line":1340},20,[64,1342,158],{"emptyLinePlaceholder":157},[64,1344,1346,1349,1351],{"class":66,"line":1345},21,[64,1347,1348],{"class":94},"          return",[64,1350,889],{"class":324},[64,1352,934],{"class":70},[64,1354,1356],{"class":66,"line":1355},22,[64,1357,643],{"class":70},[64,1359,1361],{"class":66,"line":1360},23,[64,1362,203],{"class":70},[64,1364,1366],{"class":66,"line":1365},24,[64,1367,445],{"class":70},[64,1369,1371,1373,1375],{"class":66,"line":1370},25,[64,1372,450],{"class":70},[64,1374,453],{"class":90},[64,1376,456],{"class":70},[1378,1379],"hr",{},[10,1381,1382,1383,1386],{},"I didn't want to give you the solution right from the start because there was a lesson to be learned from the first approach I took, so maybe in the future you can have a ",[22,1384,1385],{},"gotcha"," moment if you ever stumble across an issue like this.",[10,1388,1389],{},"Hope this saves you some time on your next Inertia project.",[1391,1392,1393],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":60,"searchDepth":81,"depth":81,"links":1395},[1396,1397,1398],{"id":32,"depth":104,"text":33},{"id":257,"depth":104,"text":258},{"id":797,"depth":104,"text":798},"Inertia","2020\u002F04\u002F21","If you are a Laravel developer, you have probably heard of Inertia.js, the modern monolith. With Inertia, you can quickly build modern single-page React, Vue and Svelte apps using classic server-side routing and controllers. This makes Inertia a perfect choice for building some web apps.",null,"md","\u002Fimages\u002Flaravel-inertia.jpg","vue, vue.js, inertia, layout, laravel inertia, inertia layout, monolith laravel",{},"\u002Fblog\u002Fconvenient-way-to-use-layouts-in-inertia","☕️ 8 min read",{"title":5,"description":1401},"convenient-way-to-use-layouts-in-inertia","blog\u002Fconvenient-way-to-use-layouts-in-inertia","inertia, laravel","xLM45CRyMCCEmaw3N10mOkyaTK8XdMTnAG6fKPKVOBM",1774945272381]