[{"data":1,"prerenderedAt":728},["ShallowReactive",2],{"navigation_docs":3,"-nuxt-page-layouts":221,"-nuxt-page-layouts-surround":723},[4,27,77,123,157,207],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":26},"Get started","majesticons:rocket-3-start-line","\u002Fget-started","1.get-started",[10,14,18,22],{"title":11,"path":12,"stem":13},"How it works","\u002Fget-started\u002Fhow-it-works","1.get-started\u002F10.how-it-works",{"title":15,"path":16,"stem":17},"Play online","\u002Fget-started\u002Fplay-online","1.get-started\u002F20.play-online",{"title":19,"path":20,"stem":21},"Create a new project","\u002Fget-started\u002Fcreate-new-project","1.get-started\u002F30.create-new-project",{"title":23,"path":24,"stem":25},"First steps","\u002Fget-started\u002Ffirst-steps","1.get-started\u002F40.first-steps",false,{"title":28,"icon":29,"path":30,"stem":31,"children":32,"page":26},"Guide","mdi:book-open-page-variant-outline","\u002Fguide","2.guide",[33,37,41,45,49,53,57,61,65,69,73],{"title":34,"path":35,"stem":36},"Customized API Output","\u002Fguide\u002Fcustomized-api-output","2.guide\u002F05.customized-api-output",{"title":38,"path":39,"stem":40},"Pages & Routing","\u002Fguide\u002Fpages-routing","2.guide\u002F10.pages-routing",{"title":42,"path":43,"stem":44},"Site layout & Menus","\u002Fguide\u002Fsite-layout-menus","2.guide\u002F20.site-layout-menus",{"title":46,"path":47,"stem":48},"Authentication","\u002Fguide\u002Fauthentication","2.guide\u002F40.authentication",{"title":50,"path":51,"stem":52},"Metatags & Local tasks","\u002Fguide\u002Fmetatags-local-tasks","2.guide\u002F50.metatags-local-tasks",{"title":54,"path":55,"stem":56},"Breadcrumbs & Messages","\u002Fguide\u002Fbreadcrumbs-messages","2.guide\u002F60.breadcrumbs-messages",{"title":58,"path":59,"stem":60},"Redirects","\u002Fguide\u002Fredirects","2.guide\u002F65.redirects",{"title":62,"path":63,"stem":64},"Editorial previews","\u002Fguide\u002Feditorial-previews","2.guide\u002F70.editorial-previews",{"title":66,"path":67,"stem":68},"Layout builder","\u002Fguide\u002Flayout-builder","2.guide\u002F80.layout-builder",{"title":70,"path":71,"stem":72},"Drupal Canvas","\u002Fguide\u002Fcanvas","2.guide\u002F90.canvas",{"title":74,"path":75,"stem":76},"Drupal CMS","\u002Fguide\u002Fdrupal-cms","2.guide\u002F95.drupal-cms",{"title":78,"icon":79,"path":80,"stem":81,"children":82,"page":26},"Advanced topics","bi:diagram-3","\u002Fadvanced-topics","3.advanced-topics",[83,87,91,95,99,103,107,111,115,119],{"title":84,"path":85,"stem":86},"Multi-frontend","\u002Fadvanced-topics\u002Fmulti-frontend","3.advanced-topics\u002F05.multi-frontend",{"title":88,"path":89,"stem":90},"Listings, Views","\u002Fadvanced-topics\u002Flistings-views","3.advanced-topics\u002F10.listings-views",{"title":92,"path":93,"stem":94},"Searches","\u002Fadvanced-topics\u002Fsearches","3.advanced-topics\u002F20.searches",{"title":96,"path":97,"stem":98},"JSON-API & GraphQL","\u002Fadvanced-topics\u002Fjsonapi-graphql","3.advanced-topics\u002F30.jsonapi-graphql",{"title":100,"path":101,"stem":102},"Caching","\u002Fadvanced-topics\u002Fcaching","3.advanced-topics\u002F40.caching",{"title":104,"path":105,"stem":106},"Error pages","\u002Fadvanced-topics\u002Ferror-pages","3.advanced-topics\u002F50.error-pages",{"title":108,"path":109,"stem":110},"Drupal forms","\u002Fadvanced-topics\u002Fdrupal-forms","3.advanced-topics\u002F60.drupal-forms",{"title":112,"path":113,"stem":114},"Site Templates","\u002Fadvanced-topics\u002Fsite-templates","3.advanced-topics\u002F65.site-templates",{"title":116,"path":117,"stem":118},"Block layout","\u002Fadvanced-topics\u002Fblock-layout","3.advanced-topics\u002F70.block-layout",{"title":120,"path":121,"stem":122},"Debugging API requests","\u002Fadvanced-topics\u002Fdebugging","3.advanced-topics\u002F80.debugging",{"title":124,"icon":125,"path":126,"stem":127,"children":128,"page":26},"Drupal","simple-icons:drupal","\u002Fdrupal","4.drupal",[129,133,137,141,145,149,153],{"title":130,"path":131,"stem":132},"Key modules","\u002Fdrupal\u002Fkey-modules","4.drupal\u002F10.key-modules",{"title":134,"path":135,"stem":136},"Custom elements","\u002Fdrupal\u002Fcustom-elements","4.drupal\u002F20.custom-elements",{"title":138,"path":139,"stem":140},"Routes","\u002Fdrupal\u002Froutes","4.drupal\u002F30.routes",{"title":142,"path":143,"stem":144},"Providing blocks","\u002Fdrupal\u002Fproviding-blocks","4.drupal\u002F40.providing-blocks",{"title":146,"path":147,"stem":148},"Custom Element Processors","\u002Fdrupal\u002Fcustom-element-processors","4.drupal\u002F50.custom-element-processors",{"title":150,"path":151,"stem":152},"Adding Drupal forms","\u002Fdrupal\u002Fadd-drupal-forms","4.drupal\u002F60.add-drupal-forms",{"title":154,"path":155,"stem":156},"Providing themes","\u002Fdrupal\u002Fthemes","4.drupal\u002F70.themes",{"title":158,"icon":159,"path":160,"stem":161,"children":162,"page":26},"Nuxt","simple-icons:nuxtdotjs","\u002Fnuxt","5.nuxt",[163,167,171,175,179,183,187,191,195,199,203],{"title":164,"path":165,"stem":166},"Introduction","\u002Fnuxt\u002Fintroduction","5.nuxt\u002F10.introduction",{"title":168,"path":169,"stem":170},"Setup","\u002Fnuxt\u002Fsetup","5.nuxt\u002F20.setup",{"title":172,"path":173,"stem":174},"Rendering Custom Elements","\u002Fnuxt\u002Frender-custom-elements","5.nuxt\u002F30.render-custom-elements",{"title":176,"path":177,"stem":178},"Default components","\u002Fnuxt\u002Fdefault-components","5.nuxt\u002F32.default-components",{"title":180,"path":181,"stem":182},"Composables","\u002Fnuxt\u002Fcomposables","5.nuxt\u002F35.composables",{"title":184,"path":185,"stem":186},"Custom Routes","\u002Fnuxt\u002Fcustom-routes","5.nuxt\u002F40.custom-routes",{"title":188,"path":189,"stem":190},"Page Layouts","\u002Fnuxt\u002Fpage-layouts","5.nuxt\u002F50.page-layouts",{"title":192,"path":193,"stem":194},"Component Previews","\u002Fnuxt\u002Fcomponent-previews","5.nuxt\u002F55.component-previews",{"title":196,"path":197,"stem":198},"Rendering modes","\u002Fnuxt\u002Frendering-modes","5.nuxt\u002F60.rendering-modes",{"title":200,"path":201,"stem":202},"Deployment options","\u002Fnuxt\u002Fdeployment","5.nuxt\u002F70.deployment",{"title":204,"path":205,"stem":206},"Resources","\u002Fnuxt\u002Fresources","5.nuxt\u002F90.resources",{"title":208,"icon":209,"path":210,"stem":211,"children":212,"page":26},"Deployment","solar:server-square-cloud-linear","\u002Fdeployment","6.deployment",[213,217],{"title":214,"path":215,"stem":216},"Deployment Strategies","\u002Fdeployment\u002Fdeployment-strategy","6.deployment\u002F10.deployment-strategy",{"title":218,"path":219,"stem":220},"Unified Hosting","\u002Fdeployment\u002Funified-hosting","6.deployment\u002F20.unified-hosting",{"id":222,"title":188,"body":223,"description":717,"extension":718,"links":719,"meta":720,"navigation":446,"path":189,"seo":721,"stem":190,"__hash__":722},"docs\u002F5.nuxt\u002F50.page-layouts.md",{"type":224,"value":225,"toc":711},"minimark",[226,240,251,256,266,355,359,366,376,380,391,694,698,707],[227,228,229,230,234,235,239],"p",{},"Nuxt layouts are placed in the ",[231,232,233],"code",{},".\u002Flayouts"," directory and are used to define a shared ",[236,237,238],"a",{"href":43},"site layout","\nfor a group of pages. When a page has a different layout, nuxt takes care of swapping the layout component(s).",[227,241,242,243,246,247,250],{},"For example, you can have a ",[231,244,245],{},"default.vue"," layout that is used for most pages, and a ",[231,248,249],{},"blog.vue"," layout that is used for\nall blog posts.",[252,253,255],"h2",{"id":254},"create-a-layout","Create a layout",[227,257,258,259,262,263,265],{},"To create a layout, simply create a ",[231,260,261],{},".vue"," file in the ",[231,264,233],{}," directory.",[267,268,273],"pre",{"className":269,"code":270,"language":271,"meta":272,"style":272},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003Cdiv>\n    \u003Ch1>Blog layout\u003C\u002Fh1>\n    \u003Cslot \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue","",[231,274,275,291,302,325,336,346],{"__ignoreMap":272},[276,277,280,284,288],"span",{"class":278,"line":279},"line",1,[276,281,283],{"class":282},"sMK4o","\u003C",[276,285,287],{"class":286},"swJcz","template",[276,289,290],{"class":282},">\n",[276,292,294,297,300],{"class":278,"line":293},2,[276,295,296],{"class":282},"  \u003C",[276,298,299],{"class":286},"div",[276,301,290],{"class":282},[276,303,305,308,311,314,318,321,323],{"class":278,"line":304},3,[276,306,307],{"class":282},"    \u003C",[276,309,310],{"class":286},"h1",[276,312,313],{"class":282},">",[276,315,317],{"class":316},"sTEyZ","Blog layout",[276,319,320],{"class":282},"\u003C\u002F",[276,322,310],{"class":286},[276,324,290],{"class":282},[276,326,328,330,333],{"class":278,"line":327},4,[276,329,307],{"class":282},[276,331,332],{"class":286},"slot",[276,334,335],{"class":282}," \u002F>\n",[276,337,339,342,344],{"class":278,"line":338},5,[276,340,341],{"class":282},"  \u003C\u002F",[276,343,299],{"class":286},[276,345,290],{"class":282},[276,347,349,351,353],{"class":278,"line":348},6,[276,350,320],{"class":282},[276,352,287],{"class":286},[276,354,290],{"class":282},[252,356,358],{"id":357},"drupal-controlled-layouts","Drupal controlled layouts",[227,360,361,362,365],{},"The Drupal page API comes with a ",[231,363,364],{},"page_layout"," attribute within its response. By default, this is used to control which\nlayout is applied by Nuxt. This allows Drupal code to customize the layout used by Nuxt.",[227,367,368,369,371,372,375],{},"To set a custom layout from within Drupal, the ",[231,370,364],{}," attribute must be set accordingly, e.g. via\n",[231,373,374],{},"hook_lupus_ce_renderer_response_alter()",".",[252,377,379],{"id":378},"setting-the-layout-in-the-frontend","Setting the layout in the frontend",[227,381,382,383,386,387,390],{},"The frontend may set a custom layout by proving a custom page component for some routes. For example, to change the\nlayout for all ",[231,384,385],{},"\u002Fnews\u002F*"," routes controlled by Drupal via the page API, create a component ",[231,388,389],{},"news\u002F[...slug].vue"," in the\npages directory of Nuxt. Then make the page component follow the logic of the default page component, but override the\nlayout to be hard-coded:",[267,392,394],{"className":269,"code":393,"language":271,"meta":272,"style":272},"\u003Cscript lang=\"ts\">\n  import DefaultPage from '..\u002F[...slug].vue'\n\n  export default {\n    extends: DefaultPage,\n    async setup() {\n      const { fetchPage, renderCustomElements, usePageHead, getPageLayout } = useDrupalCe()\n      const page = await fetchPage(useRoute().path, {\n        query: useRoute().query,\n      }, undefined, true)\n\n      const layout = 'custom'\n      usePageHead(page)\n\n      return {\n        page,\n        layout,\n        renderCustomElements,\n      }\n    },\n  }\n\u003C\u002Fscript>\n",[231,395,396,421,442,448,459,473,486,527,559,579,595,600,617,630,635,643,651,659,667,673,679,685],{"__ignoreMap":272},[276,397,398,400,403,407,410,413,417,419],{"class":278,"line":279},[276,399,283],{"class":282},[276,401,402],{"class":286},"script",[276,404,406],{"class":405},"spNyl"," lang",[276,408,409],{"class":282},"=",[276,411,412],{"class":282},"\"",[276,414,416],{"class":415},"sfazB","ts",[276,418,412],{"class":282},[276,420,290],{"class":282},[276,422,423,427,430,433,436,439],{"class":278,"line":293},[276,424,426],{"class":425},"s7zQu","  import",[276,428,429],{"class":316}," DefaultPage ",[276,431,432],{"class":425},"from",[276,434,435],{"class":282}," '",[276,437,438],{"class":415},"..\u002F[...slug].vue",[276,440,441],{"class":282},"'\n",[276,443,444],{"class":278,"line":304},[276,445,447],{"emptyLinePlaceholder":446},true,"\n",[276,449,450,453,456],{"class":278,"line":327},[276,451,452],{"class":425},"  export",[276,454,455],{"class":425}," default",[276,457,458],{"class":282}," {\n",[276,460,461,464,467,470],{"class":278,"line":338},[276,462,463],{"class":286},"    extends",[276,465,466],{"class":282},":",[276,468,469],{"class":316}," DefaultPage",[276,471,472],{"class":282},",\n",[276,474,475,478,481,484],{"class":278,"line":348},[276,476,477],{"class":405},"    async",[276,479,480],{"class":286}," setup",[276,482,483],{"class":282},"()",[276,485,458],{"class":282},[276,487,489,492,495,498,501,504,506,509,511,514,517,520,524],{"class":278,"line":488},7,[276,490,491],{"class":405},"      const",[276,493,494],{"class":282}," {",[276,496,497],{"class":316}," fetchPage",[276,499,500],{"class":282},",",[276,502,503],{"class":316}," renderCustomElements",[276,505,500],{"class":282},[276,507,508],{"class":316}," usePageHead",[276,510,500],{"class":282},[276,512,513],{"class":316}," getPageLayout",[276,515,516],{"class":282}," }",[276,518,519],{"class":282}," =",[276,521,523],{"class":522},"s2Zo4"," useDrupalCe",[276,525,526],{"class":286},"()\n",[276,528,530,532,535,537,540,542,545,548,550,552,555,557],{"class":278,"line":529},8,[276,531,491],{"class":405},[276,533,534],{"class":316}," page",[276,536,519],{"class":282},[276,538,539],{"class":425}," await",[276,541,497],{"class":522},[276,543,544],{"class":286},"(",[276,546,547],{"class":522},"useRoute",[276,549,483],{"class":286},[276,551,375],{"class":282},[276,553,554],{"class":316},"path",[276,556,500],{"class":282},[276,558,458],{"class":282},[276,560,562,565,567,570,572,574,577],{"class":278,"line":561},9,[276,563,564],{"class":286},"        query",[276,566,466],{"class":282},[276,568,569],{"class":522}," useRoute",[276,571,483],{"class":286},[276,573,375],{"class":282},[276,575,576],{"class":316},"query",[276,578,472],{"class":282},[276,580,582,585,588,592],{"class":278,"line":581},10,[276,583,584],{"class":282},"      },",[276,586,587],{"class":282}," undefined,",[276,589,591],{"class":590},"sfNiH"," true",[276,593,594],{"class":286},")\n",[276,596,598],{"class":278,"line":597},11,[276,599,447],{"emptyLinePlaceholder":446},[276,601,603,605,608,610,612,615],{"class":278,"line":602},12,[276,604,491],{"class":405},[276,606,607],{"class":316}," layout",[276,609,519],{"class":282},[276,611,435],{"class":282},[276,613,614],{"class":415},"custom",[276,616,441],{"class":282},[276,618,620,623,625,628],{"class":278,"line":619},13,[276,621,622],{"class":522},"      usePageHead",[276,624,544],{"class":286},[276,626,627],{"class":316},"page",[276,629,594],{"class":286},[276,631,633],{"class":278,"line":632},14,[276,634,447],{"emptyLinePlaceholder":446},[276,636,638,641],{"class":278,"line":637},15,[276,639,640],{"class":425},"      return",[276,642,458],{"class":282},[276,644,646,649],{"class":278,"line":645},16,[276,647,648],{"class":316},"        page",[276,650,472],{"class":282},[276,652,654,657],{"class":278,"line":653},17,[276,655,656],{"class":316},"        layout",[276,658,472],{"class":282},[276,660,662,665],{"class":278,"line":661},18,[276,663,664],{"class":316},"        renderCustomElements",[276,666,472],{"class":282},[276,668,670],{"class":278,"line":669},19,[276,671,672],{"class":282},"      }\n",[276,674,676],{"class":278,"line":675},20,[276,677,678],{"class":282},"    },\n",[276,680,682],{"class":278,"line":681},21,[276,683,684],{"class":282},"  }\n",[276,686,688,690,692],{"class":278,"line":687},22,[276,689,320],{"class":282},[276,691,402],{"class":286},[276,693,290],{"class":282},[252,695,697],{"id":696},"nuxt-layout-documentation","Nuxt layout documentation",[227,699,700,701,375],{},"For more information on routing in Nuxt.js, see the ",[236,702,706],{"href":703,"rel":704},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fguide\u002Fdirectory-structure\u002Flayouts",[705],"nofollow","Nuxt layouts documentation",[708,709,710],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":272,"searchDepth":293,"depth":293,"links":712},[713,714,715,716],{"id":254,"depth":293,"text":255},{"id":357,"depth":293,"text":358},{"id":378,"depth":293,"text":379},{"id":696,"depth":293,"text":697},"Nuxt layouts are placed in the .\u002Flayouts directory and are used to define a shared site layout\nfor a group of pages. When a page has a different layout, nuxt takes care of swapping the layout component(s).","md",null,{},{"title":188,"description":717},"lpZ91Xmrd9hlK3URTTNKx8EThhOUtsWDDWoCFho_N-o",[724,726],{"title":184,"path":185,"stem":186,"description":725,"children":-1},"Custom frontend routes are routes that are not defined in Drupal. They are defined in the frontend and can be used create custom pages.",{"title":192,"path":193,"stem":194,"description":727,"children":-1},"Component previews allow Vue components to be rendered in isolation in external contexts, such as the Drupal Canvas editor. This enables editors to see live previews of components directly in the page builder.",1776084720447]