[{"data":1,"prerenderedAt":1545},["ShallowReactive",2],{"navigation_docs":3,"-advanced-topics-partials":237,"-advanced-topics-partials-surround":1541},[4,27,77,131,165,223],{"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,123,127],{"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},"Partials","\u002Fadvanced-topics\u002Fpartials","3.advanced-topics\u002F15.partials",{"title":96,"path":97,"stem":98},"Searches","\u002Fadvanced-topics\u002Fsearches","3.advanced-topics\u002F20.searches",{"title":100,"path":101,"stem":102},"JSON-API & GraphQL","\u002Fadvanced-topics\u002Fjsonapi-graphql","3.advanced-topics\u002F30.jsonapi-graphql",{"title":104,"path":105,"stem":106},"Caching","\u002Fadvanced-topics\u002Fcaching","3.advanced-topics\u002F40.caching",{"title":108,"path":109,"stem":110},"Error pages","\u002Fadvanced-topics\u002Ferror-pages","3.advanced-topics\u002F50.error-pages",{"title":112,"path":113,"stem":114},"Drupal forms","\u002Fadvanced-topics\u002Fdrupal-forms","3.advanced-topics\u002F60.drupal-forms",{"title":116,"path":117,"stem":118},"Drupal JavaScript","\u002Fadvanced-topics\u002Fdrupal-javascript","3.advanced-topics\u002F62.drupal-javascript",{"title":120,"path":121,"stem":122},"Site Templates","\u002Fadvanced-topics\u002Fsite-templates","3.advanced-topics\u002F65.site-templates",{"title":124,"path":125,"stem":126},"Block layout","\u002Fadvanced-topics\u002Fblock-layout","3.advanced-topics\u002F70.block-layout",{"title":128,"path":129,"stem":130},"Debugging API requests","\u002Fadvanced-topics\u002Fdebugging","3.advanced-topics\u002F80.debugging",{"title":132,"icon":133,"path":134,"stem":135,"children":136,"page":26},"Drupal","simple-icons:drupal","\u002Fdrupal","4.drupal",[137,141,145,149,153,157,161],{"title":138,"path":139,"stem":140},"Key modules","\u002Fdrupal\u002Fkey-modules","4.drupal\u002F10.key-modules",{"title":142,"path":143,"stem":144},"Custom elements","\u002Fdrupal\u002Fcustom-elements","4.drupal\u002F20.custom-elements",{"title":146,"path":147,"stem":148},"Routes","\u002Fdrupal\u002Froutes","4.drupal\u002F30.routes",{"title":150,"path":151,"stem":152},"Providing blocks","\u002Fdrupal\u002Fproviding-blocks","4.drupal\u002F40.providing-blocks",{"title":154,"path":155,"stem":156},"Custom Element Processors","\u002Fdrupal\u002Fcustom-element-processors","4.drupal\u002F50.custom-element-processors",{"title":158,"path":159,"stem":160},"Adding Drupal forms","\u002Fdrupal\u002Fadd-drupal-forms","4.drupal\u002F60.add-drupal-forms",{"title":162,"path":163,"stem":164},"Providing themes","\u002Fdrupal\u002Fthemes","4.drupal\u002F70.themes",{"title":166,"icon":167,"path":168,"stem":169,"children":170,"page":26},"Nuxt","simple-icons:nuxtdotjs","\u002Fnuxt","5.nuxt",[171,175,179,183,187,191,195,199,203,207,211,215,219],{"title":172,"path":173,"stem":174},"Introduction","\u002Fnuxt\u002Fintroduction","5.nuxt\u002F10.introduction",{"title":176,"path":177,"stem":178},"Setup","\u002Fnuxt\u002Fsetup","5.nuxt\u002F20.setup",{"title":180,"path":181,"stem":182},"Rendering Custom Elements","\u002Fnuxt\u002Frender-custom-elements","5.nuxt\u002F30.render-custom-elements",{"title":184,"path":185,"stem":186},"Default components","\u002Fnuxt\u002Fdefault-components","5.nuxt\u002F32.default-components",{"title":188,"path":189,"stem":190},"Composables","\u002Fnuxt\u002Fcomposables","5.nuxt\u002F35.composables",{"title":192,"path":193,"stem":194},"Drupal JS libraries","\u002Fnuxt\u002Fdrupal-libraries","5.nuxt\u002F37.drupal-libraries",{"title":196,"path":197,"stem":198},"Custom Routes","\u002Fnuxt\u002Fcustom-routes","5.nuxt\u002F40.custom-routes",{"title":200,"path":201,"stem":202},"Page Layouts","\u002Fnuxt\u002Fpage-layouts","5.nuxt\u002F50.page-layouts",{"title":204,"path":205,"stem":206},"Component Previews","\u002Fnuxt\u002Fcomponent-previews","5.nuxt\u002F55.component-previews",{"title":208,"path":209,"stem":210},"Component Index","\u002Fnuxt\u002Fcanvas-components","5.nuxt\u002F57.canvas-components",{"title":212,"path":213,"stem":214},"Rendering modes","\u002Fnuxt\u002Frendering-modes","5.nuxt\u002F60.rendering-modes",{"title":216,"path":217,"stem":218},"Deployment options","\u002Fnuxt\u002Fdeployment","5.nuxt\u002F70.deployment",{"title":220,"path":221,"stem":222},"Resources","\u002Fnuxt\u002Fresources","5.nuxt\u002F90.resources",{"title":224,"icon":225,"path":226,"stem":227,"children":228,"page":26},"Deployment","solar:server-square-cloud-linear","\u002Fdeployment","6.deployment",[229,233],{"title":230,"path":231,"stem":232},"Deployment Strategies","\u002Fdeployment\u002Fdeployment-strategy","6.deployment\u002F10.deployment-strategy",{"title":234,"path":235,"stem":236},"Unified Hosting","\u002Fdeployment\u002Funified-hosting","6.deployment\u002F20.unified-hosting",{"id":238,"title":92,"body":239,"description":353,"extension":1536,"links":1537,"meta":1538,"navigation":1001,"path":93,"seo":1539,"stem":94,"__hash__":1540},"docs\u002F3.advanced-topics\u002F15.partials.md",{"type":240,"value":241,"toc":1529},"minimark",[242,247,251,254,257,270,274,278,300,330,336,347,711,728,732,745,836,859,863,888,1297,1334,1337,1351,1354,1357,1365,1368,1393,1404,1417,1474,1483,1504,1519,1525],[243,244,246],"h2",{"id":245},"overview","Overview",[248,249,250],"p",{},"A partial is a part of a page served at its own path: the custom element only, without the page around it. The frontend loads it separately from the page, usually in the browser after the page has loaded.",[248,252,253],{},"The response of a partial is the element itself - no title, breadcrumbs, metatags or page layout. It is a response of its own, so it is cached apart from the pages showing it.",[248,255,256],{},"Typical uses:",[258,259,260,264,267],"ul",{},[261,262,263],"li",{},"Random, rotating or short-lived content, like a random pick of articles or a photo of the day, on pages that are cached for long.",[261,265,266],{},"Lazy loading of content below the fold, or of content shown on demand, like a tab's panel.",[261,268,269],{},"An endpoint providing data to a frontend component, like items appended by a \"load more\" button.",[271,272,273],"note",{},"Partials require Lupus Decoupled Drupal 1.6.0 or later and Lupus Custom Elements Renderer 2.8.0 or later.",[243,275,277],{"id":276},"views-the-custom-elements-partial-display","Views: the \"Custom Elements partial\" display",[248,279,280,281,285,286,290,291,295,296,299],{},"The ",[282,283,284],"a",{"href":89},"Lupus Decoupled Views"," submodule provides the Views display ",[287,288,289],"strong",{},"Custom Elements partial"," (",[292,293,294],"code",{},"custom_elements_partial","). It works like the ",[292,297,298],{},"Custom Elements Page"," display, but serves the view as a partial:",[301,302,303,309,324],"ol",{},[261,304,305,306,308],{},"Add a ",[292,307,289],{}," display to a view.",[261,310,311,312,314,315,318,319,323],{},"Select ",[292,313,142],{}," style as view format and ",[292,316,317],{},"Content"," as row style, as for a ",[282,320,322],{"href":321},"\u002Fadvanced-topics\u002Flistings-views#usage","page display",".",[261,325,326,327,323],{},"Set a path for the partial, e.g. ",[292,328,329],{},"random-nodes",[248,331,332,333,323],{},"The display has no menu settings, since a partial is no page to link to. Contextual filters take trailing path segments as usual, e.g. ",[292,334,335],{},"\u002Frandom-nodes\u002Farticle",[248,337,338,339,342,343,346],{},"The view is served at ",[292,340,341],{},"\u002Fce-api\u002Frandom-nodes",". For a view with the ID ",[292,344,345],{},"random_nodes",", the response is the view element only:",[348,349,354],"pre",{"className":350,"code":351,"filename":341,"language":352,"meta":353,"style":353},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n  \"element\": \"drupal-view-random-nodes-partial\",\n  \"props\": {\n    \"title\": \"Random nodes\",\n    \"viewId\": \"random_nodes\",\n    \"displayId\": \"custom_elements_partial_1\",\n    \"pager\": { \"current\": 0, \"totalItems\": 2 }\n  },\n  \"slots\": {\n    \"rows\": [\n      { \"element\": \"node-article-teaser\", \"props\": { \"title\": \"First article\", \"href\": \"\u002Ffirst-article\" } },\n      { \"element\": \"node-article-teaser\", \"props\": { \"title\": \"Second article\", \"href\": \"\u002Fsecond-article\" } }\n    ]\n  }\n}\n","json","",[292,355,356,365,393,408,431,451,472,518,524,538,553,626,693,699,705],{"__ignoreMap":353},[357,358,361],"span",{"class":359,"line":360},"line",1,[357,362,364],{"class":363},"sMK4o","{\n",[357,366,368,371,375,378,381,384,388,390],{"class":359,"line":367},2,[357,369,370],{"class":363},"  \"",[357,372,374],{"class":373},"spNyl","element",[357,376,377],{"class":363},"\"",[357,379,380],{"class":363},":",[357,382,383],{"class":363}," \"",[357,385,387],{"class":386},"sfazB","drupal-view-random-nodes-partial",[357,389,377],{"class":363},[357,391,392],{"class":363},",\n",[357,394,396,398,401,403,405],{"class":359,"line":395},3,[357,397,370],{"class":363},[357,399,400],{"class":373},"props",[357,402,377],{"class":363},[357,404,380],{"class":363},[357,406,407],{"class":363}," {\n",[357,409,411,414,418,420,422,424,427,429],{"class":359,"line":410},4,[357,412,413],{"class":363},"    \"",[357,415,417],{"class":416},"sBMFI","title",[357,419,377],{"class":363},[357,421,380],{"class":363},[357,423,383],{"class":363},[357,425,426],{"class":386},"Random nodes",[357,428,377],{"class":363},[357,430,392],{"class":363},[357,432,434,436,439,441,443,445,447,449],{"class":359,"line":433},5,[357,435,413],{"class":363},[357,437,438],{"class":416},"viewId",[357,440,377],{"class":363},[357,442,380],{"class":363},[357,444,383],{"class":363},[357,446,345],{"class":386},[357,448,377],{"class":363},[357,450,392],{"class":363},[357,452,454,456,459,461,463,465,468,470],{"class":359,"line":453},6,[357,455,413],{"class":363},[357,457,458],{"class":416},"displayId",[357,460,377],{"class":363},[357,462,380],{"class":363},[357,464,383],{"class":363},[357,466,467],{"class":386},"custom_elements_partial_1",[357,469,377],{"class":363},[357,471,392],{"class":363},[357,473,475,477,480,482,484,487,489,493,495,497,500,503,505,508,510,512,515],{"class":359,"line":474},7,[357,476,413],{"class":363},[357,478,479],{"class":416},"pager",[357,481,377],{"class":363},[357,483,380],{"class":363},[357,485,486],{"class":363}," {",[357,488,383],{"class":363},[357,490,492],{"class":491},"sbssI","current",[357,494,377],{"class":363},[357,496,380],{"class":363},[357,498,499],{"class":491}," 0",[357,501,502],{"class":363},",",[357,504,383],{"class":363},[357,506,507],{"class":491},"totalItems",[357,509,377],{"class":363},[357,511,380],{"class":363},[357,513,514],{"class":491}," 2",[357,516,517],{"class":363}," }\n",[357,519,521],{"class":359,"line":520},8,[357,522,523],{"class":363},"  },\n",[357,525,527,529,532,534,536],{"class":359,"line":526},9,[357,528,370],{"class":363},[357,530,531],{"class":373},"slots",[357,533,377],{"class":363},[357,535,380],{"class":363},[357,537,407],{"class":363},[357,539,541,543,546,548,550],{"class":359,"line":540},10,[357,542,413],{"class":363},[357,544,545],{"class":416},"rows",[357,547,377],{"class":363},[357,549,380],{"class":363},[357,551,552],{"class":363}," [\n",[357,554,556,559,561,563,565,567,569,572,574,576,578,580,582,584,586,588,591,593,595,597,600,602,604,606,609,611,613,615,618,620,623],{"class":359,"line":555},11,[357,557,558],{"class":363},"      {",[357,560,383],{"class":363},[357,562,374],{"class":491},[357,564,377],{"class":363},[357,566,380],{"class":363},[357,568,383],{"class":363},[357,570,571],{"class":386},"node-article-teaser",[357,573,377],{"class":363},[357,575,502],{"class":363},[357,577,383],{"class":363},[357,579,400],{"class":491},[357,581,377],{"class":363},[357,583,380],{"class":363},[357,585,486],{"class":363},[357,587,383],{"class":363},[357,589,417],{"class":590},"swJcz",[357,592,377],{"class":363},[357,594,380],{"class":363},[357,596,383],{"class":363},[357,598,599],{"class":386},"First article",[357,601,377],{"class":363},[357,603,502],{"class":363},[357,605,383],{"class":363},[357,607,608],{"class":590},"href",[357,610,377],{"class":363},[357,612,380],{"class":363},[357,614,383],{"class":363},[357,616,617],{"class":386},"\u002Ffirst-article",[357,619,377],{"class":363},[357,621,622],{"class":363}," }",[357,624,625],{"class":363}," },\n",[357,627,629,631,633,635,637,639,641,643,645,647,649,651,653,655,657,659,661,663,665,667,670,672,674,676,678,680,682,684,687,689,691],{"class":359,"line":628},12,[357,630,558],{"class":363},[357,632,383],{"class":363},[357,634,374],{"class":491},[357,636,377],{"class":363},[357,638,380],{"class":363},[357,640,383],{"class":363},[357,642,571],{"class":386},[357,644,377],{"class":363},[357,646,502],{"class":363},[357,648,383],{"class":363},[357,650,400],{"class":491},[357,652,377],{"class":363},[357,654,380],{"class":363},[357,656,486],{"class":363},[357,658,383],{"class":363},[357,660,417],{"class":590},[357,662,377],{"class":363},[357,664,380],{"class":363},[357,666,383],{"class":363},[357,668,669],{"class":386},"Second article",[357,671,377],{"class":363},[357,673,502],{"class":363},[357,675,383],{"class":363},[357,677,608],{"class":590},[357,679,377],{"class":363},[357,681,380],{"class":363},[357,683,383],{"class":363},[357,685,686],{"class":386},"\u002Fsecond-article",[357,688,377],{"class":363},[357,690,622],{"class":363},[357,692,517],{"class":363},[357,694,696],{"class":359,"line":695},13,[357,697,698],{"class":363},"    ]\n",[357,700,702],{"class":359,"line":701},14,[357,703,704],{"class":363},"  }\n",[357,706,708],{"class":359,"line":707},15,[357,709,710],{"class":363},"}\n",[248,712,713,714,717,718,720,721,723,724,727],{},"The element name is ",[292,715,716],{},"drupal-view-{view_id}-partial",", with underscores in the view ID turned into dashes, unless overridden in the display settings. The ",[292,719,479],{}," prop depends on the view's pager: with \"Display a specified number of items\", ",[292,722,507],{}," is the number of rows returned. As for any custom elements route, ",[292,725,726],{},"?_content_format=markup"," returns the element as markup.",[243,729,731],{"id":730},"custom-routes","Custom routes",[248,733,734,735,738,739,380],{},"Any route can be served as a partial. Mark it with the ",[292,736,737],{},"_lupus_ce_renderer: content"," route option, provided by the ",[282,740,744],{"href":741,"rel":742},"https:\u002F\u002Fwww.drupal.org\u002Fproject\u002Flupus_ce_renderer",[743],"nofollow","Lupus Custom Elements Renderer",[348,746,751],{"className":747,"code":748,"filename":749,"language":750,"meta":353,"style":353},"language-yaml shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","MODULE.recommendations:\n  path: '\u002Frecommendations\u002F{channel}'\n  defaults:\n    _controller: '\\Drupal\\MODULE\\Controller\\RecommendationsController::build'\n  requirements:\n    _permission: 'access content'\n  options:\n    _lupus_ce_renderer: content\n","MODULE.routing.yml","yaml",[292,752,753,761,777,784,798,805,819,826],{"__ignoreMap":353},[357,754,755,758],{"class":359,"line":360},[357,756,757],{"class":590},"MODULE.recommendations",[357,759,760],{"class":363},":\n",[357,762,763,766,768,771,774],{"class":359,"line":367},[357,764,765],{"class":590},"  path",[357,767,380],{"class":363},[357,769,770],{"class":363}," '",[357,772,773],{"class":386},"\u002Frecommendations\u002F{channel}",[357,775,776],{"class":363},"'\n",[357,778,779,782],{"class":359,"line":395},[357,780,781],{"class":590},"  defaults",[357,783,760],{"class":363},[357,785,786,789,791,793,796],{"class":359,"line":410},[357,787,788],{"class":590},"    _controller",[357,790,380],{"class":363},[357,792,770],{"class":363},[357,794,795],{"class":386},"\\Drupal\\MODULE\\Controller\\RecommendationsController::build",[357,797,776],{"class":363},[357,799,800,803],{"class":359,"line":433},[357,801,802],{"class":590},"  requirements",[357,804,760],{"class":363},[357,806,807,810,812,814,817],{"class":359,"line":453},[357,808,809],{"class":590},"    _permission",[357,811,380],{"class":363},[357,813,770],{"class":363},[357,815,816],{"class":386},"access content",[357,818,776],{"class":363},[357,820,821,824],{"class":359,"line":474},[357,822,823],{"class":590},"  options",[357,825,760],{"class":363},[357,827,828,831,833],{"class":359,"line":520},[357,829,830],{"class":590},"    _lupus_ce_renderer",[357,832,380],{"class":363},[357,834,835],{"class":386}," content\n",[248,837,838,839,842,843,846,847,850,851,854,855,858],{},"The controller returns a custom element as for any ",[282,840,841],{"href":147},"route",". As any custom elements route, it is fetched with the API prefix, e.g. ",[292,844,845],{},"\u002Fce-api\u002Frecommendations\u002Fnews",". The response contains only that element, like the ",[292,848,849],{},"content"," of a page response. The ",[292,852,853],{},"_select"," query parameter has no effect on a partial route. To get the content of a regular page route without the page for a single request, use ",[292,856,857],{},"_select=content"," instead.",[243,860,862],{"id":861},"frontend","Frontend",[248,864,865,866,871,872,875,876,879,880,883,884,887],{},"A Nuxt frontend using ",[282,867,870],{"href":868,"rel":869},"https:\u002F\u002Fgithub.com\u002Fdrunomics\u002Fnuxtjs-drupal-ce",[743],"nuxtjs-drupal-ce"," fetches a partial with the ",[292,873,874],{},"useCeApi()"," ",[282,877,878],{"href":189},"composable"," and renders it with ",[292,881,882],{},"renderCustomElements()",". Set ",[292,885,886],{},"server: false",", so the partial is fetched in the browser only and not during server-side rendering. The following component loads the partial once it is about to scroll into view:",[348,889,894],{"className":890,"code":891,"filename":892,"language":893,"meta":353,"style":353},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup>\nconst { useCeApi, renderCustomElements } = useDrupalCe()\nconst { data, execute } = useCeApi('\u002Frandom-nodes', { server: false, immediate: false })\n\nconst container = useTemplateRef('container')\nlet observer\nonMounted(() => {\n  observer = new IntersectionObserver(([entry]) => {\n    if (entry.isIntersecting) {\n      observer.disconnect()\n      execute()\n    }\n  }, { rootMargin: '0px 0px 100%' })\n  observer.observe(container.value)\n})\nonBeforeUnmount(() => observer?.disconnect())\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv ref=\"container\" style=\"min-height: 24rem\">\n    \u003Ccomponent :is=\"renderCustomElements(data)\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","components\u002FRandomNodes.vue","vue",[292,895,896,910,939,997,1003,1027,1035,1050,1079,1099,1111,1118,1123,1146,1166,1172,1195,1205,1210,1220,1254,1278,1288],{"__ignoreMap":353},[357,897,898,901,904,907],{"class":359,"line":360},[357,899,900],{"class":363},"\u003C",[357,902,903],{"class":590},"script",[357,905,906],{"class":373}," setup",[357,908,909],{"class":363},">\n",[357,911,912,915,917,921,923,926,929,932,936],{"class":359,"line":367},[357,913,914],{"class":373},"const",[357,916,486],{"class":363},[357,918,920],{"class":919},"sTEyZ"," useCeApi",[357,922,502],{"class":363},[357,924,925],{"class":919}," renderCustomElements ",[357,927,928],{"class":363},"}",[357,930,931],{"class":363}," =",[357,933,935],{"class":934},"s2Zo4"," useDrupalCe",[357,937,938],{"class":919},"()\n",[357,940,941,943,945,948,950,953,955,957,959,962,965,968,970,972,974,977,979,983,985,988,990,992,994],{"class":359,"line":395},[357,942,914],{"class":373},[357,944,486],{"class":363},[357,946,947],{"class":919}," data",[357,949,502],{"class":363},[357,951,952],{"class":919}," execute ",[357,954,928],{"class":363},[357,956,931],{"class":363},[357,958,920],{"class":934},[357,960,961],{"class":919},"(",[357,963,964],{"class":363},"'",[357,966,967],{"class":386},"\u002Frandom-nodes",[357,969,964],{"class":363},[357,971,502],{"class":363},[357,973,486],{"class":363},[357,975,976],{"class":590}," server",[357,978,380],{"class":363},[357,980,982],{"class":981},"sfNiH"," false",[357,984,502],{"class":363},[357,986,987],{"class":590}," immediate",[357,989,380],{"class":363},[357,991,982],{"class":981},[357,993,622],{"class":363},[357,995,996],{"class":919},")\n",[357,998,999],{"class":359,"line":410},[357,1000,1002],{"emptyLinePlaceholder":1001},true,"\n",[357,1004,1005,1007,1010,1013,1016,1018,1020,1023,1025],{"class":359,"line":433},[357,1006,914],{"class":373},[357,1008,1009],{"class":919}," container ",[357,1011,1012],{"class":363},"=",[357,1014,1015],{"class":934}," useTemplateRef",[357,1017,961],{"class":919},[357,1019,964],{"class":363},[357,1021,1022],{"class":386},"container",[357,1024,964],{"class":363},[357,1026,996],{"class":919},[357,1028,1029,1032],{"class":359,"line":453},[357,1030,1031],{"class":373},"let",[357,1033,1034],{"class":919}," observer\n",[357,1036,1037,1040,1042,1045,1048],{"class":359,"line":474},[357,1038,1039],{"class":934},"onMounted",[357,1041,961],{"class":919},[357,1043,1044],{"class":363},"()",[357,1046,1047],{"class":373}," =>",[357,1049,407],{"class":363},[357,1051,1052,1055,1057,1060,1063,1065,1068,1072,1075,1077],{"class":359,"line":520},[357,1053,1054],{"class":919},"  observer",[357,1056,931],{"class":363},[357,1058,1059],{"class":363}," new",[357,1061,1062],{"class":934}," IntersectionObserver",[357,1064,961],{"class":590},[357,1066,1067],{"class":363},"([",[357,1069,1071],{"class":1070},"sHdIc","entry",[357,1073,1074],{"class":363},"])",[357,1076,1047],{"class":373},[357,1078,407],{"class":363},[357,1080,1081,1085,1087,1089,1091,1094,1097],{"class":359,"line":526},[357,1082,1084],{"class":1083},"s7zQu","    if",[357,1086,290],{"class":590},[357,1088,1071],{"class":919},[357,1090,323],{"class":363},[357,1092,1093],{"class":919},"isIntersecting",[357,1095,1096],{"class":590},") ",[357,1098,364],{"class":363},[357,1100,1101,1104,1106,1109],{"class":359,"line":540},[357,1102,1103],{"class":919},"      observer",[357,1105,323],{"class":363},[357,1107,1108],{"class":934},"disconnect",[357,1110,938],{"class":590},[357,1112,1113,1116],{"class":359,"line":555},[357,1114,1115],{"class":934},"      execute",[357,1117,938],{"class":590},[357,1119,1120],{"class":359,"line":628},[357,1121,1122],{"class":363},"    }\n",[357,1124,1125,1128,1130,1133,1135,1137,1140,1142,1144],{"class":359,"line":695},[357,1126,1127],{"class":363},"  },",[357,1129,486],{"class":363},[357,1131,1132],{"class":590}," rootMargin",[357,1134,380],{"class":363},[357,1136,770],{"class":363},[357,1138,1139],{"class":386},"0px 0px 100%",[357,1141,964],{"class":363},[357,1143,622],{"class":363},[357,1145,996],{"class":590},[357,1147,1148,1150,1152,1155,1157,1159,1161,1164],{"class":359,"line":701},[357,1149,1054],{"class":919},[357,1151,323],{"class":363},[357,1153,1154],{"class":934},"observe",[357,1156,961],{"class":590},[357,1158,1022],{"class":919},[357,1160,323],{"class":363},[357,1162,1163],{"class":919},"value",[357,1165,996],{"class":590},[357,1167,1168,1170],{"class":359,"line":707},[357,1169,928],{"class":363},[357,1171,996],{"class":919},[357,1173,1175,1178,1180,1182,1184,1187,1190,1192],{"class":359,"line":1174},16,[357,1176,1177],{"class":934},"onBeforeUnmount",[357,1179,961],{"class":919},[357,1181,1044],{"class":363},[357,1183,1047],{"class":373},[357,1185,1186],{"class":919}," observer",[357,1188,1189],{"class":363},"?.",[357,1191,1108],{"class":934},[357,1193,1194],{"class":919},"())\n",[357,1196,1198,1201,1203],{"class":359,"line":1197},17,[357,1199,1200],{"class":363},"\u003C\u002F",[357,1202,903],{"class":590},[357,1204,909],{"class":363},[357,1206,1208],{"class":359,"line":1207},18,[357,1209,1002],{"emptyLinePlaceholder":1001},[357,1211,1213,1215,1218],{"class":359,"line":1212},19,[357,1214,900],{"class":363},[357,1216,1217],{"class":590},"template",[357,1219,909],{"class":363},[357,1221,1223,1226,1229,1232,1234,1236,1238,1240,1243,1245,1247,1250,1252],{"class":359,"line":1222},20,[357,1224,1225],{"class":363},"  \u003C",[357,1227,1228],{"class":590},"div",[357,1230,1231],{"class":373}," ref",[357,1233,1012],{"class":363},[357,1235,377],{"class":363},[357,1237,1022],{"class":386},[357,1239,377],{"class":363},[357,1241,1242],{"class":373}," style",[357,1244,1012],{"class":363},[357,1246,377],{"class":363},[357,1248,1249],{"class":386},"min-height: 24rem",[357,1251,377],{"class":363},[357,1253,909],{"class":363},[357,1255,1257,1260,1263,1266,1268,1270,1273,1275],{"class":359,"line":1256},21,[357,1258,1259],{"class":363},"    \u003C",[357,1261,1262],{"class":590},"component",[357,1264,1265],{"class":373}," :is",[357,1267,1012],{"class":363},[357,1269,377],{"class":363},[357,1271,1272],{"class":386},"renderCustomElements(data)",[357,1274,377],{"class":363},[357,1276,1277],{"class":363}," \u002F>\n",[357,1279,1281,1284,1286],{"class":359,"line":1280},22,[357,1282,1283],{"class":363},"  \u003C\u002F",[357,1285,1228],{"class":590},[357,1287,909],{"class":363},[357,1289,1291,1293,1295],{"class":359,"line":1290},23,[357,1292,1200],{"class":363},[357,1294,1217],{"class":590},[357,1296,909],{"class":363},[248,1298,1299,1300,1303,1304,1307,1308,1311,1312,1315,1316,1319,1320,1323,1324,1326,1327,1330,1331,1333],{},"The view element renders like any ",[282,1301,1302],{"href":321},"listing",": by the ",[292,1305,1306],{},"drupal-view--default"," component, or by a component ",[292,1309,1310],{},"drupal-view-random-nodes-partial.vue"," for a custom look. The ",[292,1313,1314],{},"rootMargin"," starts loading one viewport height ahead. To load the partial right after the page has loaded, drop ",[292,1317,1318],{},"immediate: false"," and the observer. The example uses plain ",[292,1321,1322],{},"\u003Cscript setup>",": ",[292,1325,874],{}," is typed for page responses, so with ",[292,1328,1329],{},"lang=\"ts\""," passing its data to ",[292,1332,882],{}," fails type checking unless cast.",[248,1335,1336],{},"Notes:",[258,1338,1339,1342,1348],{},[261,1340,1341],{},"Reserve the space of the content, e.g. with a minimum height or a placeholder, so the page does not shift when the partial arrives.",[261,1343,1344,1345,323],{},"With the server API proxy enabled, the browser fetches the partial from the frontend at ",[292,1346,1347],{},"\u002Fapi\u002Fdrupal-ce\u002Frandom-nodes",[261,1349,1350],{},"Do not fetch partials holding random or short-lived content during server-side rendering. The content would be rendered into the page and cached with the page.",[243,1352,104],{"id":1353},"caching",[248,1355,1356],{},"A partial is a response of its own, with its own cache entry and cache tags. When rendered into a page instead, the content shares the page's response:",[258,1358,1359,1362],{},[261,1360,1361],{},"A random view rendered into a page is drawn once and stays in the cached page until the page is invalidated. Every visitor sees the same pick.",[261,1363,1364],{},"As a partial, the page and the pick are cached apart. The page does not depend on the view's cache tags, and the partial is invalidated without invalidating the pages showing it.",[248,1366,1367],{},"By default, a partial gets these headers, as a page does:",[258,1369,1370,1383],{},[261,1371,1372,1375,1376,1379,1380,323],{},[292,1373,1374],{},"Content-Type: application\u002Fjson",", or ",[292,1377,1378],{},"text\u002Fplain"," with ",[292,1381,1382],{},"_content_format=markup",[261,1384,1385,1388,1389,323],{},[292,1386,1387],{},"Cache-Control: public, max-age=…",", with the maximum age set at ",[1390,1391,1392],"em",{},"Configuration > Development > Performance",[248,1394,1395,1396,1399,1400,1403],{},"Unlike a page, it has no ",[292,1397,1398],{},"X-Drupal-CE: page"," header. The response carries the cache tags of the view and its results only, e.g. for purging a reverse proxy. They show up as ",[292,1401,1402],{},"X-Drupal-Cache-Tags"," with cache debug headers enabled.",[248,1405,1406,1407,1412,1413,1416],{},"Drupal core does not apply the max-age of the rendered content to the response headers and the Internal Page Cache (see ",[282,1408,1411],{"href":1409,"rel":1410},"https:\u002F\u002Fwww.drupal.org\u002Fproject\u002Fdrupal\u002Fissues\u002F2352009",[743],"#2352009","). For example, a view sorted randomly has a max-age of 0, yet its response is cached like any page. The Internal Page Cache keeps anonymous responses until a cache tag is invalidated, unless the response sets a future ",[292,1414,1415],{},"Expires"," header. To give a partial a shorter lifetime than the pages, either:",[258,1418,1419,1451],{},[261,1420,1421,1422,1425,1426,1428,1429,1431,1432,1435,1436,1439,1440,1443,1444,1447,1448,1450],{},"Set the lifetime in the response: an event subscriber on the partial's route sets ",[292,1423,1424],{},"Cache-Control: public, max-age=N"," and a matching ",[292,1427,1415],{}," header. The Internal Page Cache drops its entry when ",[292,1430,1415],{}," has passed, and a reverse proxy or CDN follows the ",[292,1433,1434],{},"max-age",". Give the subscriber a negative priority, so it runs after Drupal core's ",[292,1437,1438],{},"FinishResponseSubscriber",", and only change responses already marked ",[292,1441,1442],{},"public",". Otherwise it could make a ",[292,1445,1446],{},"no-cache"," response cacheable, e.g. one for a logged-in user. Internal Page Cache copies keep their ",[292,1449,1434],{},", so a CDN fetching one just before it expires keeps it another full lifetime: up to about twice the lifetime.",[261,1452,1453,1454,1457,1458,1461,1462,1465,1466,1469,1470,1473],{},"Or set the lifetime for the partial's path in the reverse proxy or CDN, and keep the path out of the Internal Page Cache. Without the Internal Page Cache module, the partial keeps its ",[292,1455,1456],{},"public, max-age"," header. A response policy denying the Internal Page Cache for the path makes Drupal send ",[292,1459,1460],{},"Cache-Control: no-cache, must-revalidate, private",", so the CDN rule must override the origin's ",[292,1463,1464],{},"Cache-Control",". For a custom route, the route option ",[292,1467,1468],{},"no_cache: TRUE"," denies the Internal Page Cache through a response policy built into Drupal core. With the server API proxy enabled, the CDN sees the partial at ",[292,1471,1472],{},"\u002Fapi\u002Fdrupal-ce\u002F\u003Cpath>"," on the frontend host, so the rule matches that path.",[248,1475,1476,1477,1479,1480,1482],{},"The server API proxy of nuxtjs-drupal-ce passes the ",[292,1478,1464],{}," and ",[292,1481,1415],{}," headers of Drupal through unchanged.",[248,1484,1485,1486,1489,1490,1493,1494,1496,1497,1500,1501,1503],{},"Views caching of the view itself also holds the same pick, whatever the headers. With ",[1390,1487,1488],{},"Tag based"," caching, the default, it keeps the pick until the content changes; with ",[1390,1491,1492],{},"Time-based"," caching, for its lifetime. Set ",[1390,1495,104],{}," to ",[1390,1498,1499],{},"None",", or use ",[1390,1502,1492],{}," caching with a lifetime matching the partial.",[248,1505,280,1506,1511,1512,1514,1515,1518],{},[282,1507,1510],{"href":1508,"rel":1509},"https:\u002F\u002Fwww.drupal.org\u002Fproject\u002Fcache_control_override",[743],"Cache Control Override"," module applies the max-age of the content to the ",[292,1513,1464],{}," header, but site-wide, not per partial. For a randomly sorted view this results in ",[292,1516,1517],{},"max-age=0",", so the response of the partial is not cached at any layer. Any page whose content has a max-age of 0, e.g. one embedding a randomly sorted view, is not cached either.",[248,1520,1521,1522,1524],{},"See ",[282,1523,104],{"href":105}," for page-level caching in general.",[1526,1527,1528],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}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}",{"title":353,"searchDepth":367,"depth":367,"links":1530},[1531,1532,1533,1534,1535],{"id":245,"depth":367,"text":246},{"id":276,"depth":367,"text":277},{"id":730,"depth":367,"text":731},{"id":861,"depth":367,"text":862},{"id":1353,"depth":367,"text":104},"md",null,{},{"title":92,"description":353},"Hnxv05cwQbU8SuxZ-_k3zjYk2P-q4aFhSHVfPzD1KJQ",[1542,1544],{"title":88,"path":89,"stem":90,"description":1543,"children":-1},"The Lupus Decoupled Views\nsubmodule provides support for Drupal's Views module. The Views module is Drupal's native way and very powerful way of creating listings of content. It provides a UI for configuring complex queries, searches and the rendering of results, including paging.",{"title":96,"path":97,"stem":98,"description":353,"children":-1},1794595423474]